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


1.0.0-alpha.2 • Public • Published


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 }) => (
            <div onClick={onToggleMode}>Toggle Dark Mode</div>
            <div onClick={onLogOut}>Log Out</div>


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

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


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.


npm i @leiops/dropdown

Downloadsweekly downloads






last publish


  • avatar
Report a vulnerability