npm

Need private packages and team management tools?Check out npm Orgs. »

@leiops/dropdown

1.0.0-alpha.2 • Public • Published

@leiops/dropdown

npm npm

A flexible dropdown component system for React Apps.

How to use

This library provides several components which you can use as a basis for any kind of dropdown menu:

Dropdown - a wrapper element for everything. Dropdown.Trigger - the element which tells the Dropdown container to show the dropdown . Dropdown.Content - a wrapper for all of the content hidden/shown at the discretion of the Dropdown container.

Keep in mind that Trigger and Content must be direct children of Dropdown. Here's a quick example:

import Dropdown from '@leiops/dropdown'
 
 
const Menu = ({ onLogOut, onToggleMode }) => (
    <Dropdown>
        <Dropdown.Trigger>Profile</Dropdown.Trigger>
        <Dropdown.Content>
            <div onClick={onToggleMode}>Toggle Dark Mode</div>
            <div onClick={onLogOut}>Log Out</div>
        </Dropdown.Content>
    </Dropdown>
)

Instance

Each instance of Dropdown has some methods developers might find useful.

Method Description
show Shows the dropdown.
hide Hides the dropdown.

Working

Right now, the dropdown watches child mutations and puts together a list of every element removed from within in order to deal with a situation where removing a child which was clicked on would close the dropdown. This may not be the desired behavior, perhaps only one removed item should be saved?

Portal and Dropdown contain almost idential code, I bet that can be dried up.

install

npm i @leiops/dropdown

Downloadsweekly downloads

4

version

1.0.0-alpha.2

license

MIT

last publish

collaborators

  • avatar
Report a vulnerability