Skip to content
A dead simple dropdown component for React
JavaScript CSS HTML
Find file
Pull request Compare This branch is 22 commits behind fraserxu:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
dist
example
.gitignore
LICENSE
README.md
index.js
package.json
style.css

README.md

react-dropdown

NPM version Downloads

Simple Dropdown component for React, inspired by react-select
Demo is available here

Why

  • The default HTML select element is hard to style
  • And sometime we also want grouped menus
  • if you want more advanced select, check react-select

Installation

$ npm install react-dropdown  --save

Changelog

If you want to support React version under v0.13, use react-dropdown@v0.6.1

Usage

'use strict';

import React from 'react';
import Dropdown from '../';

class App extends React.Component {

  constructor() {
    this.state = {
      selected: { value: 'two', label: 'Two'}
    }
  }

  _onSelect(option) {
    console.log('You selected ', option.label)
    this.setState({selected: option})
  }

  render() {

    const options = [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
      {
        type: 'group', name: 'group1', items: [
          { value: 'three', label: 'Three' },
          { value: 'four', label: 'Four' }
        ]
      },
      {
        type: 'group', name: 'group2', items: [
          { value: 'five', label: 'Five' },
          { value: 'six', label: 'Six' }
        ]
      }
    ]

    let defaultOption = this.state.selected

    return (
      <Dropdown options={options} onChange={this._onSelect.bind(this)} value={defaultOption} placeholder="Select an option" />
    )
  }

}
React.render(<App />, document.body)

Run example

$ cd example && npm install && npm run watch

License

MIT | Build for CSViz project @Wiredcraft

Something went wrong with that request. Please try again.