Registry / web-framework / react-dropdown

react-dropdown

library1.11.0jsnpmunverified

React Dropdown is a simple, lightweight component designed for creating custom-styled dropdowns in React applications, currently at version 1.11.0. It addresses the styling limitations of native HTML `<select>` elements and supports grouped options, which are not easily achievable with standard HTML. Unlike more feature-rich libraries like `react-select`, this package prioritizes simplicity and customizability for basic dropdown needs, offering granular control over CSS classes for various parts of the component. While it has been stable, development appears to be inactive, with the last publish dating back over four years. It ships with TypeScript types and supports a wide range of React versions via peer dependencies, from 0.14.7 up to 18.0.0.

web-framework

npm install react-dropdown

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-DROPDOWN

react-dropdown

web-frameworkjavascriptv1.11.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Dropdown

✓ import Dropdown from 'react-dropdown';

✗ import { Dropdown } from 'react-dropdown';

The primary component is exported as a default export.

Dropdown CSS

✓ import 'react-dropdown/style.css';

✗ import Dropdown from '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.

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;

Debug

Known issues

breakingFor 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.

affects: >=1.0.0

gotchaThe 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.

affects: >=0.6.1

gotchaThis 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`.

affects: *

gotchaThe `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.

affects: >=1.11.0

gotchaWhen 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);`).

affects: *

Errors

Common errors & fixes

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

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

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

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.

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.

Upgrade

Version history

1.11.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React applications. Supports a wide range of React versions.

react-domrequiredPeer dependency for rendering React components to the DOM. Supports a wide range of React DOM versions.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/fraserxu/react-dropdown ↗

packagehttps://www.npmjs.com/package/react-dropdown ↗