@tgdn/react-dropdown

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