unop-react-dropdown

Unopinionated dropdown component for react.

View Demo View Github

Motivation

I found myself reusing this dropdown logic between different projects.

Features

Completely unopinionated (does not enforce any styling whatsoever)
Lifecycle functions that allow things like animations before the dropdown closes
Since it's unopinionated, you can turn any element to a dropdown trigger and any element to a drop down menu.
Includes basic functionality for opening, closing and setting delay before close (for things like a close animation to happen)

Live Demo

A visual storybook to demonstrate the various component prop behaviour can be found below.

The hover prop demo

The align prop demo

The other component props, and their options can be found here

Code Sandbox Demo

The component was implemented to create an editable demo dropdown for reference in code sandbox

Dropdown in code sandbox

Full list of component props, and their options can be found here

Installation

Unop-react-drop down is available as an npm package

npm install unop-react-dropdown

Usage

import UnopDropdown from "unop-react-dropdown";

and use as:

<UnopDropdown trigger={<button>Click</button>}>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</UnopDropdown>

trigger is the minimum required prop
To implement the other props, they can be passed as such:

<UnopDropdown
      onAppear={handler}
      onDisappearStart={handler}
      trigger={<button className="AnimatedDropdownButton">Hover</button>}
      delay={300}
      align="CENTER"
      hover
    >
        <div>I am random</div>
        <div>I am random</div>
        <div>I am random</div>
    </UnopDropdown>

Check out the code sandbox implementation for any clarification.