Nearsighted Prank Master

    rdropdown

    1.2.0 • Public • Published

    RDropdown

    A github flavoured dropdown menu for ReactJS.

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

    Screenshot

    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 git@github.com: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.

    Install

    npm i rdropdown

    DownloadsWeekly Downloads

    14

    Version

    1.2.0

    License

    MIT

    Last publish

    Collaborators

    • jamhall