This is a basic React Dropdown component, created to experiment and test stuff. It's built using Popper.js, a positioning engine third-party library. Menu items can be either a Button or a Link and supports both HTML attributes.
You can check out Storybook Demo if you don't want to clone the project!
This dropdown is designed to be completely usable or keyboard and mouse.
<Dropdown>
<Dropdown.Button>
Menu
</Dropdown.Button>
<Dropdown.Menu>
<Dropdown.Item>
Click me
</Dropdown.Item>
<Dropdown.Item as="a" href="https://google.com" target="_blank">
Access google
</Dropdown.Item>
<Dropdown.Item>
That's the button!
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
First, run the storybook server:
npm run storybook
# or
yarn storybook
You are able to check unit tests by running:
npm run test
# or
yarn test