Nearsighted Prank Master


    1.2.0 • Public • Published


    A github flavoured dropdown menu for ReactJS.





    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) {
        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() {
          isOpen: false
      handleOpen() {
          isOpen: true
      handleSelectedOptions(options) {
            isOpen: !this.state.isOpen,
            selectedOptions: options
      renderOption(option) {
        return (<div>{}</div>);
      renderDropdown() {
        const countries = [
                  { name: "France", code: "FR" },
                  { name: "Italy", code: "IT"  },
                  { name: "United Kingdom", code: "GB" }
        if(this.state.isOpen) {
          return (
                        onClose={ this.handleClose }
                        onSelectedOptions={ this.handleSelectedOptions }
                        selectedOptions={ this.state.selectedOptions }
                        renderOption={ this.renderOption }/>
      renderSelected() {
        const {selectedOptions} = this.state;
        if(selectedOptions) {
          return (<span>{ }</span>);
        return (<span>No option selected</span>)
      render() {
        return (
            <button onClick={this.handleOpen}>Open</button>
            { this.renderDropdown () }
            <p>Selected options: {this.renderSelected() }</p>

    Please look at the example source code in the demo folder for a good example of how to use the component:


    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 && cd rdropdown

    Install the dependencies:

    npm install

    Run the demo:

    npm start

    Navigate to:



    MIT Licensed. Copyright (c) Jamie Hall 2016.


    npm i rdropdown

    DownloadsWeekly Downloads






    Last publish


    • jamhall