react-bulma-dropdown
TypeScript icon, indicating that this package has built-in type declarations

0.1.10 • Public • Published

React Bulma dropdown

It's a Bulma's dropdown, with an auto-height, scroll and portal support.

The .dropdown-menu is not simply rendered below the .dropdown-trigger, but is portaled to another DOM element. Thanks to that your dropdown will work in element that has overflow:hiden or overflow:scroll CSS style.

The .dropdown-menu is auto resizing to match the portal's bottom edge.

Installation

yarn add react-bulma-dropdown

You have also to include the dist/main.css file.

Basic example

import Dropdown from 'react-bulma-dropdown'

<Dropdown trigger="Choose">
  <a href="#" className="dropdown-item">Item A</a>
  <a href="#" className="dropdown-item">Item B</a>
  <a href="#" className="dropdown-item">Item C</a>
</Dropdown>

You can find more examples in Storybook.

Properties

Property Type Description Default
children ReactNode The .dropdown-content's content
trigger string or ReactNode The trigger rendered in the .dropdown-trigger "Open dropdown"
portal null or HTMLElement Element to which the .dropdown-menu will be portaled. If null, then it will be portaled to the end of the document null
className string Optional CSS class name for the .dropdown-menu's wrapper ""
openOnMount boolean Open the .dropdown-menu on mount false
isAnimated boolean Animate the .dropdown-menu opening true
hideOnLinkClick boolean Close the .dropdown-menu after clicking an a.dropdown-item true
margin integer Min. distance between bottom of the dropdown and bottom of the portal 20
controlRef (ref: ControlRefType) => void A ref that consist object with open and close methods. undefined

Development

yarn run storybook

Readme

Keywords

Package Sidebar

Install

npm i react-bulma-dropdown

Weekly Downloads

2

Version

0.1.10

License

MIT

Unpacked Size

34.1 kB

Total Files

10

Last publish

Collaborators

  • jakub-zawislak