React Dropdown Component

Common errors

• Module not found: Can't resolve 'react-dropdown/style.css'

  cause The CSS stylesheet for the component's default styling was not imported.
  fix Add `import 'react-dropdown/style.css';` to your application's entry point or the component where `Dropdown` is used.

• TypeError: Dropdown is not a function or is not iterable

  cause Incorrect import statement, particularly when mixing CommonJS `require` with default ESM exports or using named imports for a default export.
  fix For ESM, use `import Dropdown from 'react-dropdown';`. For CommonJS, use `const Dropdown = require('react-dropdown').default;`.

• TypeError: Cannot read properties of undefined (reading 'value') in onChange handler

  cause The `onChange` handler is attempting to access `option.value` when `option` itself is `undefined` or not an object, or `this` context is lost in a class component.
  fix Verify that the `onChange` handler receives a valid `option` object. If in a class component, ensure the handler is correctly bound to `this` (e.g., `onChange={this._onSelect.bind(this)}` or use an arrow function property).

• Dropdown appears but clicking it does nothing or the menu doesn't open.

  cause The `disabled` prop might be inadvertently set to `true`, preventing user interaction.
  fix Check if the `disabled` prop is present on the `Dropdown` component. Remove it or ensure its value evaluates to `false` if the dropdown should be interactive.

Warnings

• breaking For React versions older than `v0.13`, you must use `react-dropdown@v0.6.1`. Using `v1.x` or later with legacy React versions will result in runtime errors due to API changes.
  Fix: Downgrade to `react-dropdown@0.6.1` if targeting React < v0.13, or upgrade your React version if possible.
• gotcha The component's default styling is not automatically applied. Forgetting to import `'react-dropdown/style.css'` will result in an unstyled and potentially visually broken dropdown.
  Fix: Ensure you add `import 'react-dropdown/style.css';` to your main entry file or the component file where `Dropdown` is used.
• gotcha This library offers a simple dropdown component and explicitly notes it is not `react-select`. It does not provide advanced features like multi-select, search filtering, asynchronous options loading, or virtualization found in more complex libraries.
  Fix: If advanced functionality is required, consider using a feature-rich alternative like `react-select` rather than trying to extend `react-dropdown`.
• gotcha The `react-dropdown` package appears to be unmaintained since its last release over four years ago. This may lead to compatibility issues with newer React versions or ecosystem changes, potential security vulnerabilities not addressed, or difficulties in getting community support.
  Fix: For new projects or long-term maintenance, consider migrating to a more actively maintained dropdown library. For existing projects, be prepared to fork and maintain the package or accept potential stagnation.
• gotcha When using the `onChange` handler within a React class component, issues with `this` context can occur if the method is not properly bound.
  Fix: Ensure `this._onSelect` is bound, for example, by using an arrow function property (`_onSelect = (option) => { ... }`) or binding in the constructor (`this._onSelect = this._onSelect.bind(this);`).

Install

• npm install react-dropdown npm
• yarn add react-dropdown yarn
• pnpm add react-dropdown pnpm

Imports

• Dropdown
  wrong:

  import { Dropdown } from 'react-dropdown';

  correct:

  import Dropdown from 'react-dropdown';

  The primary component is exported as a default export.
• Dropdown CSS
  wrong:

  import Dropdown from 'react-dropdown/style.css';

  correct:

  import 'react-dropdown/style.css';

  The default styles are imported as a side-effect. This is crucial for the component's appearance.
• Option type

  import type { Option } from 'react-dropdown';

  Type definitions are provided for better TypeScript integration, especially for complex option structures.

Quickstart

Demonstrates basic usage with both flat and grouped options, state management, and custom class names.

import React, { useState } from 'react';
import Dropdown from 'react-dropdown';
import 'react-dropdown/style.css';

const options = [
  'one', 'two', 'three',
  { type: 'group', name: 'Group 1', items: [
    { value: 'four', label: 'Four' },
    { value: 'five', label: 'Five' }
  ]}
];

function MyDropdownComponent() {
  const [selectedOption, setSelectedOption] = useState(options[0]);

  const _onSelect = (option) => {
    setSelectedOption(option);
    console.log('Selected:', option.value);
  };

  return (
    <div className="dropdown-container">
      <h2>Basic Dropdown Example</h2>
      <Dropdown
        options={options}
        onChange={_onSelect}
        value={selectedOption}
        placeholder="Select an option"
        className="my-custom-dropdown"
        controlClassName="my-custom-control"
        menuClassName="my-custom-menu"
      />
      <p>Current selection: {selectedOption ? selectedOption.label || selectedOption : 'None'}</p>
    </div>
  );
}

export default MyDropdownComponent;