React Dropdown
This package provides a dropdown component and example styles (scss and css).
Installation
You can install this packge with either npm or yarn.
npm i @ninetynine/react-dropdown
An example of how to install the package through NPM.
yarn add @ninetynine/react-dropdown
An example of how to install the package through Yarn.
Be sure to import the styles into your main style file or into your HTML, and import the component if you wish to use it within your project.
import "~@ninetynine/dropdown/dist/dropdown"
An example of how to import into scss.
Usage
After importing the styles and component into your project you'll be able to use the <Dropdown /> component.
By default the component will not have any menu items, so it displays an empty message: "No Options Found". <Dropdown /> will bind itself to any single child passed into it using onClick.
<Dropdown>
<a>I now can toggle the dropdown onClick</a>
</Dropdown>A minimal example for basic usage.
Passing list items into the dropdown
By default there are no menuItems passed into <Dropdown />. menuItems accepts an array of shapes: { content; onClick; }. content being a valid React element and onClick being a function.
<Dropdown
menuItems={[
{
content: 'Hello, world',
onClick: this.handleClick
}
]}
>
<a>I now can toggle the dropdown onClick</a>
</Dropdown>A minimal example of passing a string into a menu item.
<Dropdown
menuItems={[
{
content: (
<p>Hello, world</p>
),
onClick: this.handleClick
}
]}
>
<a>I now can toggle the dropdown onClick</a>
</Dropdown>A minimal example of passing a valid React Element into a menu item.
Changing the empty message
If no menuItems are passed into <Dropdown /> then it will display an empty message. By default this empty message reads: "No Options Found", you can change this using the emptyMessage prop which accepts a valid React element.
<Dropdown
emptyMessage={'Custom Empty Message'}
>
<a>I now can toggle the dropdown onClick</a>
</Dropdown>An example of how to change the empty message with a string.
<Dropdown
emptyMessage={(
<Flex row>
<p>Hello, world</p>
</Flex>
)}
>
<a>I now can toggle the dropdown onClick</a>
</Dropdown>An example of how to change the empty message with valid React elements.
Adding custom styles and class names to <Dropdown />
<Dropdown /> has the props style and className that directly alter the styles and classes of the containing element. These work the same way as they would on a standard HTML element.
It's worth noting that className will append classes to the already default <Dropdown /> classes.