react-select

react-select is a flexible and beautiful React select/dropdown component. It aims to provide a robust, accessible, and themeable replacement for the native HTML <select> element, which often falls short in terms of styling capabilities, user experience for multi-selection, and advanced features. It's widely used in React applications for its extensive customization options, powerful feature set, and built-in accessibility.

Key Features:

1. Customization: Easily customize the appearance and behavior of the component using styled-components or its extensive API for custom components.
2. Accessibility: Built with accessibility in mind, supporting keyboard navigation and ARIA attributes out of the box.
3. Single & Multi-Select: Supports both single-value selection and multi-value selection with tagging.
4. Asynchronous Loading: Allows loading options dynamically, perfect for large datasets or options fetched from an API.
5. Creatable Options: Enables users to create new options on the fly if their desired option isn't available in the predefined list.
6. Filtering & Searching: Provides powerful client-side filtering and searching capabilities, making it easy to find specific options.
7. Grouping: Supports grouping related options together for better organization and user experience.
8. Performance: Optimized for performance, even with a large number of options.
9. Clearable: Option to clear the selected value(s).

Usage typically involves importing the `Select` component and passing an array of options (each with a `value` and `label` property) along with managing the selected value(s) in the component's state using `useState`.

Example Code

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

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
  { value: 'mint', label: 'Mint Chocolate Chip' },
  { value: 'pistachio', label: 'Pistachio' }
];

function ReactSelectExample() {
  const [selectedSingleOption, setSelectedSingleOption] = useState(null);
  const [selectedMultiOptions, setSelectedMultiOptions] = useState([]);

  const handleSingleChange = (selectedOption) => {
    setSelectedSingleOption(selectedOption);
    console.log('Single option selected:', selectedOption);
  };

  const handleMultiChange = (selectedOptions) => {
    setSelectedMultiOptions(selectedOptions);
    console.log('Multiple options selected:', selectedOptions);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h2>React-Select Examples</h2>

      <h3>Single Select</h3>
      <p>Selected: {selectedSingleOption ? selectedSingleOption.label : 'None'}</p>
      <Select
        value={selectedSingleOption}
        onChange={handleSingleChange}
        options={options}
        placeholder="Select a single flavor..."
        isClearable
        isSearchable
      />

      <h3 style={{ marginTop: '40px' }}>Multi Select</h3>
      <p>
        Selected:
        {
          selectedMultiOptions.length > 0
            ? selectedMultiOptions.map(option => option.label).join(', ')
            : 'None'
        }
      </p>
      <Select
        defaultValue={[]}
        isMulti
        name="colors"
        options={options}
        className="basic-multi-select"
        classNamePrefix="select"
        onChange={handleMultiChange}
        placeholder="Select multiple flavors..."
      />
    </div>
  );
}

export default ReactSelectExample;

Example Code

Related Topics