react-select 5.7.4

React-Select is a versatile Select control for ReactJs. It offers a fresh, customizable approach to developing powerful React.js components that work right out of the box. The package includes many sought-after features like an extensible styling API with emotion, a function-rich API that allows complete control over UI behavior, modular architecture, and even long-requested features such as option groups, portal support, and animation.

To utilize React-Select in your JavaScript project, first install it to your application via npm using the command yarn add react-select. To use it within a React component, first import it into your file using import Select from 'react-select'. You'll need to specify your dropdown options in an array of objects, each with 'value' and 'label' properties. To make the select work, use it in your app's render function with necessary props like 'value' and 'onChange'.

For example, you can use React-Select like so:

import React from 'react';
import Select from 'react-select';

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

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

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

For React Hooks, the usage will be slightly different:

import React, { useState } from 'react';
import Select from 'react-select';

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

export default function App() {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <div className="App">
      <Select
        defaultValue={selectedOption}
        onChange={setSelectedOption}
        options={options}
      />
    </div>
  );
}

For comprehensive documentation on React-Select, live demos, upgrade guides, or how to use the types, visit react-select.com. The website provides complete documentation on props supported by react-select, as well as how to customize styles, use custom components, create an async select, and more. Guides for more advanced use-cases and a TypeScript guide are also available on the site.