# react-select-advanced-dropdown

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

Latest version **0.1.7** (published 2022-08-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-select-advanced-dropdown
pnpm add react-select-advanced-dropdown
yarn add react-select-advanced-dropdown
bun add react-select-advanced-dropdown
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2022-08-22 |
| First published | 2022-08-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | therohitjha |
| Maintainers | therohitjha |

## Links

- npm: https://www.npmjs.com/package/react-select-advanced-dropdown
- npm.io page: https://npm.io/package/react-select-advanced-dropdown

## Recent versions

- 0.1.7 (latest) — 2022-08-22
- 0.1.6 — 2022-08-22
- 0.1.5 — 2022-08-21
- 0.1.4 — 2022-08-21
- 0.1.3 — 2022-08-21
- 0.1.2 — 2022-08-21
- 0.1.1 — 2022-08-21
- 0.1.0 — 2022-08-21

## README

#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

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

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

---
_Source: https://npm.io/package/react-select-advanced-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._