@scriptless/dropdown

A flexible dropdown component system for React apps.

Quick Start

This library provides a default export, Dropdown, which will wrap any dropdown setup. It drives the robust focus-management logic that this library provides.

Dropdown also provides two children, Dropdown.Trigger and Dropdown.Content, everything you need to compose a dropdown. Here's an example:

import React from 'react'
import Dropdown from '@scriptless/dropdown'

const UserMenu = props => (
    <div className="UserMenu">
        <Dropdown>
            <Dropdown.Trigger>
                {props.userName}
            </Dropdown.Trigger>
            <Dropdown.Content>
                <img src={props.userAvatar} />
            </Dropdown.Content>
        </Dropdown>
    </div>
)

export default UserMenu

Dropdown.Trigger will always be rendered to the screen, clicking it will show and hide Dropdown.Content.