React Dropdown 
An accessible, easy to use, customizable dropdown library for the web.
Ongoing work on the library.
Playground
To run demo on your computer
-
npm install -
npm run storybook - visit http://localhost:9001/
Installing
npm install --save @tgdn/react-dropdown
Usage
import React from 'react'
import {
Dropdown,
DropdownMenu,
DropdownMenuItem,
DropdownButton
} from '@tgdn/react-dropdown'
const MyMenu = props => {
return (
<DropdownButton title='Click me' center>
<DropdownMenu>
<DropdownMenuItem>Click me</DropdownMenuItem>
<DropdownMenuItem>Once more</DropdownMenuItem>
<DropdownMenuItem>Log out</DropdownMenuItem>
</DropdownMenu>
</DropdownButton>
)
}Configuration
Different prop types are available for use on DropdownButton or directly on Dropdown
| Prop | Default | Value | Description |
|---|---|---|---|
opened |
false | true/false | Whether the dropdown should be visible after mounting |
noArrow |
false | true/false | If true, no arrow will be displayed. The default is with an arrow, and thus false |
arrowLeft |
false | true/false | If true, the arrow will be on the left of the dropdown, otherwise arrow stays untouched |
arrowRight |
false | true/false | If true, the arrow will be on the right of the dropdown, otherwise arrow stays untouched |
center |
false | true/false | Whether to align the dropdown and the button so they are horizontally aligned |
pullLeft |
false | true/false | If true, the dropdown will be shifted all the way to the left |
pullRight |
false | true/false | If true, the dropdown will be shifted all the way to the right |
alignLeft |
false | true/false | If true, the dropdown will left side will be aligned with the container's left side |
alignRight |
false | true/false | If true, the dropdown will right side will be aligned with the container's right side |
Done
- Simple UI
- Reactive Component
- Dropdown positioning
- Arrow positioning
- Dropdown Button and Menu
To do
- Dynamic positioning on window scroll and window resize
- More components (simple view, ...)