RDropdown

A github flavoured dropdown menu for ReactJS.

Demo: https://jamhall.github.io/rdropdown/

Screenshot

Installation

npm install rdropdown --save

Import RDropdown and its styles in your application as follows:

import RDropdown from 'rdropdown';
import 'rdropdown/dist/rdropdown.css';

Example usage

A simple example:

import React, { Component } from 'react';
import RDropdown from 'rdropdown';
import 'rdropdown/dist/rdropdown.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.handleClose = this.handleClose.bind(this);
    this.handleOpen = this.handleOpen.bind(this);
    this.handleSelectedOptions = this.handleSelectedOptions.bind(this);
    this.state = {
      isOpen: false,
      selectedOptions: null
    };
  }

  handleClose() {
    this.setState({
      isOpen: false
    });
  }

  handleOpen() {
    this.setState({
      isOpen: true
    });
  }


  handleSelectedOptions(options) {
    this.setState({
        isOpen: !this.state.isOpen,
        selectedOptions: options
    });
  }

  renderOption(option) {
    return (<div>{option.name}</div>);
  }

  renderDropdown() {
    const countries = [
              { name: "France", code: "FR" },
              { name: "Italy", code: "IT"  },
              { name: "United Kingdom", code: "GB" }
    ];
    if(this.state.isOpen) {
      return (
          <RDropdown
                    options={countries}
                    onClose={ this.handleClose }
                    onSelectedOptions={ this.handleSelectedOptions }
                    selectedOptions={ this.state.selectedOptions }
                    renderOption={ this.renderOption }/>

      );
    }
  }

  renderSelected() {
    const {selectedOptions} = this.state;
    if(selectedOptions) {
      return (<span>{ selectedOptions.name }</span>);
    }
    return (<span>No option selected</span>)
  }

  render() {
    return (
      <div>
        <button onClick={this.handleOpen}>Open</button>
        { this.renderDropdown () }
        <p>Selected options: {this.renderSelected() }</p>
      </div>
    );
  }
}

Please look at the example source code in the demo folder for a good example of how to use the component: https://github.com/jamhall/rdropdown/tree/master/demo

Properties

Name | Type | Required | Description ------------------- | ---------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------- options | Array or promise | Yes | Options to be used for the list renderOption | Function | Yes | Callback used to render an option item in the dropdown list onSelectedOptions | Function | Yes | Callback when an option item(s) is selected. If set to multiple, it will return an array otherwise it will return an object selectedOptions | Any | Yes | An an array of options or an option object. This is used to pre-select the options in the list title | String | No | The title of the dropdown (default: 'Filter') searchable | Bool | No | Activate or disactivate searching. (default:false) searchPlaceholder | No | String | The search input box placeholder (default: Search) searchTimeout | No | Number | When to start searching after the user stops typing (default: 200ms) | noResultsText | String | No | Text to be displayed when no options are found (default: 'No results') onSearch | Function | Yes if searchable enabled | Callback or a promise for when a user starts typing to search the list onClose | Function | Yes | Close the menu enableEsc | Bool | No | Allow the user to press ESC to close the menu (default: true) errorText | String | No | String to be displayed to the user when an error occurs (default: 'An error occurred') height | Number | No | The maximum height of the dropdown list (default: 300) multiple | Bool | No | Allow multiple selected options (default: false) applyOptions | Bool | No | Make the use manually apply the options selected (default: false) applyOptionsText | String | No | The text to be displayed for the apply button (default: 'Apply' ) |

Running the examples

Clone the repository:

git clone [email protected]:jamhall/rdropdown.git && cd rdropdown

Install the dependencies:

npm install

Run the demo:

npm start

Navigate to:

http://localhost:3001/

License

MIT Licensed. Copyright (c) Jamie Hall 2016.