ItsJonQ / g2

✨ An experimental reimagining of WordPress components
http://g2-components.com/
MIT License
105 stars 12 forks source link

Dropdown: Enable custom state and children render function handling #156

Closed ItsJonQ closed 3 years ago

ItsJonQ commented 3 years ago

This update improves the Dropdown component to accept a custom Reakit (menu) state. It also now accommodates render function handling from the children prop.

Example
<Dropdown visible>
  {({ onClose }) => {
    return (
      <>
        <DropdownTrigger>Dropdown</DropdownTrigger>
        <DropdownMenu>
          <DropdownMenuItem onClick={onClose}>
            One
          </DropdownMenuItem>
          <DropdownMenuItem>Two</DropdownMenuItem>
          <DropdownMenuItem>Three</DropdownMenuItem>
        </DropdownMenu>
      </>
    );
  }}
</Dropdown>

The callbacks props being passed to the children render prop is remapped (useMenuState) to support current @wordpress/components Dropdown/DropdownMenu APIs:

https://github.com/WordPress/gutenberg/tree/master/packages/components/src/dropdown-menu


Resolves: https://github.com/ItsJonQ/g2/issues/147

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/itsjonq/g2/1809izq33
✅ Preview: https://g2-git-update-dropdown-rendering-for-functions.itsjonq.vercel.app