react-select-advanced-dropdown v0.1.7

#Installation and usage

The easiest way to use react-select-advanced-dropdown is to install it from npm and build it into your app with Webpack.

• yarn add react-select-advanced-dropdown OR
• npm i react-select-advanced-dropdown Then use it in your app:

With React Component

import React from 'react';
import Dropdown from 'react-select-advanced-dropdown';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

class App extends React.Component {
  state = {
    value: "",
  };
  handleChange = (selectedOption) => {
    this.setState({ value: selectedOption }, () =>
      console.log(`Option selected:`, this.state.value)
    );
  };
  onSelect = (selectedOption) => {
    this.setState({ value: selectedOption }, () =>
      console.log(`Option selected:`, this.state.value)
    );
  };
  render() {
    const { value } = this.state;

    return (
      <Dropdown
        value={value}
        onChange={this.handleChange}
        options={options}
        onSelect={this.onSelect}
      />
    );
  }
}

With React Hooks

import React, { useState } from 'react';
import Dropdown from 'react-select-advanced-dropdown';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

export default function App() {
  const [value, setValue] = useState("");

  const handleChange = (selectedOption) => {
    setValue(selectedOption);
  };

  const onSelect = (selectedOption) => {
    setValue(selectedOption);
  };

  return (
    <div className="App">
      <Dropdown
        value={value}
        onChange={handleChange}
        options={options}
        onSelect={onSelect}
      />
    </div>
  );
}

#Props Common props you may want to specify include:

• onChange - subscribe to change events
• options - specify the options the user can select from
• placeholder - change the text displayed when no option is selected
• value - control the current value

#Style ClassName or inline style you may want to specify includes:

• inputClassName - Pass this className to control input or override existing style.
• inputStyle - Pass this inline style to control input or override existing style
• menuClassName - Pass this className to control menu or override existing style
• menuStyle - Pass this inline style to control menu or override existing style
• optionsItemClassName - Pass this className to control options or override existing style
• optionsItemStyle - Pass this inline style to control options or override existing style

Demo:- https://codesandbox.io/s/focused-faraday-f6xz2s?file=/src/App.js