rdropdown

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 [e-mail]: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.