React-dev-comps.dropdown NPM

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.

```js
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.

```js
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.

```js
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.