react-bulma-dropdown
Version:
It's a Bulma's dropdown, with an auto-height, scroll and portal support.
51 lines (36 loc) • 3.57 kB
Markdown
# 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](https://reactjs.org/docs/portals.html) 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
```jsx
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](https://jakub-zawislak.github.io/react-bulma-dropdown/).
## 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](https://reactjs.org/docs/portals.html). 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
```