react-dev-comps.dropdown

React Dropdown Component for Accessible Rich Internet Applications.

Installation

npm install react-dev-comps.dropdown --save

Usage

At bare minimum, you can use Dropdown component with 2 required props and 1 additional styling prop.

Other than that, you can customize and extend almost anything that Dropdown component provides.

1. Dropdown component has 2 required props:

   • options: An array of items that will be displayed as dropdown items.
   • onSelection: A callback that will be called with the selected item's index.

   import Dropdown from 'react-dev-comps.dropdown';  
   
   class MyComponent extends React.Component {
     render() {
       // lets say we have country lists as dropdown items.
       const options = ['Turkey', 'United Kingdom', 'France', 'Brazil', 'South Africa'];
     
       return (
         <div className="body-container">
           <Dropdown
             onSelection={index => { /* do smth with selected item's index. */ }}
             options={options}
           />
         </div>
       );
     }
   
   }
   
   export default MyComponent;

2. Dropdown component has a conditionally loaded default style file. You can import by using getDefaultStyles prop.

   import Dropdown from 'react-dev-comps.dropdown';  
   
   class MyComponent extends React.Component {
     render() {
       // lets say we have country lists as dropdown items.
       const options = ['Turkey', 'United Kingdom', 'France', 'Brazil', 'South Africa'];
     
       return (
         <div className="body-container">
           <Dropdown
             onSelection={index => { /* do smth with selected item's index. */ }}
             options={options}
             getDefaultStyles
           />
         </div>
       );
     }
   
   }
   
   export default MyComponent;

3. Dropdown component has additional props that you can use to customize almost anything it provides.

   import * as React from 'react';
   import Dropdown from 'react-dev-comps.dropdown';
   
   interface Prop {
    anyProp: any;
   }
   
   interface State {
     selectedIdx?: number;
     options: any[];
     text: string;
     isOpen: boolean;
   }
   
   class MyComponent extends React.Component<Prop, State> {
     constructor(props:Prop) {
       super(props);
       this.state = {
         text: '',
         selectedIdx: -1,
         options: ['France', 'Turkey', 'Sweden', 'England'],
       };
       this.getTrigger = this.getTrigger.bind(this);
       this.getSearchBox = this.getSearchBox.bind(this);
       this.handleSelection = this.handleSelection.bind(this);
       this.handleClose = this.handleClose.bind(this);
     }
   
     getTrigger() {
       const { selectedIdx, isOpen, options } = this.state;
   
       return (
         <div className="dropdown-trigger">
           <div className="trigger-text">
             {options[selectedIdx] || 'Choose an option'}
           </div>
           <div className="trigger-icon-wrapper">
             <span className={`trigger-icon${isOpen ? ' --icon-opened' : ''}`}>{'>'}</span>
           </div>
         </div>
       );
     }
   
     getSearchBox() {
       return (
         <div className="dropdown-search-wrapper">
           <input
             className="dropdown-search-box"
             onChange={(e: any) => { this.setState({ text: e.target.value }); }}
             placeholder={'Search Country'}
             value={this.state.text}
           />
         </div>
       );
     }
   
     handleSelection(idx: any) {
       this.setState({ selectedIdx: idx });
     }
   
     handleClose() {
       this.setState({ text: '' });
     }
   
     // 5th indexed element will be disabled for selecting with keypress.
     isValidKeypress(nextNavigatedIndex: number) {
       return nextNavigatedIndex !== 5;
     }
   
     render() {
       const { options, text } = this.state;
       const optionsTbDisplayed = options.filter(each => each.includes(text));
   
       return (
         <div className="body-container">
           <Dropdown
             options={optionsTbDisplayed}
             dropdownTrigger={this.getTrigger}
             topComponent={this.getSearchBox}
             onSelection={this.handleSelection}
             onClose={this.handleClose}
             isValidKeyPress={this.isValidKeypress}
             getDefaultStyles
             initialFocusedIndex={0}
             preventOnCloseSelection={false}
           />
         </div>
       );
     }
   
   }
   
   export default MyComponent;
   

API

react-dev-comps.dropdown exposes a React Component which takes the following props:

• options: An array of elements to be listed on dropdown's item list.

• onSelection: A callback that will be called with the selected item's index.

• onClose: A callback that will be called when dropdown is closed.

• optionsComponent: A function that returns react components. This function exposes and will be called with 3 arguments.

  • eachItem: Each item exist in options array.
  • index: Index of the current item in options array.
  • isNavigated: Boolean value indicates the focus statement of the each element.

  If this prop will not be provided, Dropdown component will render its own default item component.

• dropdownTrigger: A function that returns react components. If this prop will not be provided, Dropdown component will render its own default trigger component.

• topComponent: A function that returns react components. You can specify a component that will be rendered under trigger and above item list. Example usage: 'Search-Box'

• bottomComponent: A function that returns react components. You can specify a component that will be rendered under item list. Example usage: 'Close-Button'

• isOpen: A boolean that indicates the open state of the Dropdown component. Although Dropdown component itself is able to manage that state, you can control it yourself.

• initialFocusedIndex: A number that manages the initial focused Dropdown list item when it's opened. Defaults to -1.

• isValidKeyPress: A validation function that must return a boolean. It exposes and is called with 1 argument.

  • nextNavigatedIndex: Index of next navigated element with keypress. You can disable keyboard events conditionally for some Dropdown list items by using this prop.

• getDefaultStyles: A boolean that determines the usage of default styles that Dropdown provided. Defaults to false.

• preventOnCloseSelection: A boolean that is used to prevent default behaviour of Dropdown. Defaults to false.

License

Licensed under the MIT License, Copyright © 2019-present.

See LICENSE for more information.