https://github.com/Fauntleroy/react-simple-dropdown

Non-prescriptive React.js dropdown toolkit
https://github.com/Fauntleroy/react-simple-dropdown

Last synced: 4 months ago
JSON representation

Non-prescriptive React.js dropdown toolkit

• Host: GitHub
• URL: https://github.com/Fauntleroy/react-simple-dropdown
• Owner: Fauntleroy
• License: isc
• Created: 2015-06-27T23:32:17.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-09-13T08:15:18.000Z (over 4 years ago)
• Last Synced: 2024-05-17T04:22:28.202Z (7 months ago)
• Language: JavaScript
• Size: 2.18 MB
• Stars: 225
• Watchers: 5
• Forks: 76
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## React Simple Dropdown

Non-prescriptive React.js dropdown toolkit.

[See it in action (Demo)](http://fauntleroy.github.io/react-simple-dropdown/)

### Installation

This module is designed for use with [Browserify](http://browserify.org) (but should work with anything CommonJS compatible). You can easily install it with [npm](http://npmjs.com):

```bash

npm install react-simple-dropdown

```

### How to use

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.

- `DropdownContent`: Contains the "filling" of your dropdown. Generally, this is a list of links.

- `Dropdown`: The base element for your dropdown. This contains both the `DropdownTrigger` and the `DropdownContent`, and handles communication between them.

There is also a [barebones stylesheet](styles/Dropdown.css) 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:

```js

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 (

            

                Profile

                

                     Username

                    


                        


                            Profile

                        

                        


                            Favorites

                        

                        


                            Log Out

                        

                    

                

            

        )

    }

});

```


### Options

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

----- | ----- | -----

**active** | *boolean* | Manually show/hide the `DropdownContent`. Make sure to unset this or the dropdown will stay open.

**disabled** | *boolean* | Disable toggling of the dropdown by clicking on `DropdownTrigger`. Toggling with `active`, `show()`, and `hide()` is still possible.

**removeElement** | *boolean* | Remove the `DropdownContent` element when inactive (rather than just hide it).

**onShow** | *function* | Callback for when `DropdownContent` is shown.

**onHide** | *function* | Callback for when `DropdownContent` is hidden.

### Instance

Each instance of `Dropdown` has some methods developers might find useful.

Method | Description

----- | -----

**show** | Shows the dropdown.

**hide** | Hides the dropdown.

**isActive** | Returns a boolean indicating whether or not the dropdown is active.