Non-prescriptive React.js dropdown toolkit.
This module is designed for use with Browserify (but should work with anything CommonJS compatible). You can easily install it with npm:
npm install react-simple-dropdown
This module provides three React components that you can use as a basis for any kind of dropdown menu:
DropdownTrigger
: The element that will cause your dropdown to appear when clicked.DropdownContents
: Contains the "filling" of your dropdown. Generally, this is a list of links.Dropdown
: The base element for your dropdown. This contains both theDropdownTrigger
and theDropdownContents
, and handles communication between them.
There is also a barebones stylesheet which must be included in order for the component to actually work.
Keep in mind that DropdownTrigger
and DropdownContent
must be direct children of Dropdown
. Here's a quick example:
var React = require('react');
var Dropdown = require('react-simple-dropdown');
var DropdownTrigger = Dropdown.DropdownTrigger;
var DropdownContent = Dropdown.DropdownContent;
var Menu = React.createClass({
render: function () {
return (
<Dropdown>
<DropdownTrigger>Profile</DropdownTrigger>
<DropdownContent>
<img src="avatar.jpg" /> Username
<ul>
<li>
<a href="/profile">Profile</a>
</li>
<li>
<a href="/favorites">Favorites</a>
</li>
<li>
<a href="/logout">Log Out</a>
</li>
</ul>
</DropdownContent>
</Dropdown>
)
}
});
Options can be passed to Dropdown
as props. A list of available options can be found below. These must be passed to the containing Dropdown
component.
Property | Type | Description |
---|---|---|
show | boolean | Manually show/hide the DropdownContent . Make sure to unset this or the dropdown will stay open. |
onShow | function | Callback for when DropdownContent is shown. |
onHide | function | Callback for when DropdownContent is hidden. |