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, ...)