Rdropdown NPM | npm.io

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' )