Skip to content

AkinAguda/unop-react-dropdown

Repository files navigation

unop-react-dropdown

Unopinionated dropdown component for react.

build

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.

Web site, docs and demo

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>

or

<UnopDropdown trigger={<button>Click</button>}>
  {({ hide }) => (
    <ul>
      <li>
        <button onClick={hide}>click me to hide dropdown</button>
      </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>
    <div>I am random</div>
    <div>I am random</div>
    <div>I am random</div>
  </div>
</UnopDropdown>

Check out the code sandbox implementation for any clarification.

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

Help and Contributions

How to help/contribute

  • fix issues, pull request are very welcome
  • write, improve docs
  • write tests
  • suggest features and improvements

API

Component props

Prop Type Default Description
trigger Jsx.Element none This is the only compulsory prop. This will be passed an onClick to handle the toggling when it is rendered. This should prefarably be a button
align 'RIGHT' or 'LEFT' or 'CENTER' 'LEFT' When 'RIGHT', the dropdown will be rendered below the trigger, aligned to the right. When 'CENTER', the dropdown will be aligned to the center
onAppear function null This will be called when the dropdown is visible
onDisappear function null This will be called when the dropdown is invisible
onDisappearStart function null This will be called when the timeout to diappear(become invisible) starts
delay number 0 This is the delay in milliseconds before the dropdown goes invisible
hover boolean false When true, the dropdown will become visible on hover
closeOnClickOut boolean false When true, this closes the dropdown when the user clicks on any element that is outside the dropdown
closeOnDropdownClicked boolean false When true, this closes the dropdown when any area in the dropdown is clicked
dropdownWrapperClassName string "" An optional className that weaps around the Dropdown Wrapper
dropdownMenuClassName string "" An optional className that weaps around the Dropdown Menu

License

MIT