rc-dropdown

library4.2.1jsnpmunverified

rc-dropdown is a fundamental, unstyled UI component for React applications, providing the core logic and accessibility features for dropdown menus, tooltips, and contextual overlays. It is currently at stable version 4.2.1 and is part of the extensive react-component library ecosystem, known for building highly customizable and performant UI primitives. While it offers essential dropdown functionalities like visibility control, placement, and event handling, it intentionally leaves styling and complex menu rendering to the consumer or higher-level UI libraries like Ant Design, which heavily utilize rc-dropdown internally. The project maintains an active development pace with regular updates, including refactors and minor feature enhancements, but major version bumps can introduce significant internal changes.

web-framework

npm install rc-dropdown

github ↗package ↗

INSTALL

IMPORT

SIG · RC-DROPDOWN

rc-dropdown

web-frameworkjavascriptv4.2.1

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 'rc-dropdown';

✗ const Dropdown = require('rc-dropdown'); import { Dropdown } from 'rc-dropdown';

The primary component is a default export. While older documentation might show CommonJS `require`, modern React projects should use the ES Module default import.

DropdownProps

✓ import type { DropdownProps } from 'rc-dropdown';

✗ import { DropdownProps } from 'rc-dropdown';

Use `import type` for importing type definitions to ensure they are stripped from the JavaScript output, adhering to modern TypeScript best practices.

TriggerProps / OverlayProps

✓ import type { TriggerProps, OverlayProps } from 'rc-dropdown';

✗ import { TriggerProps, OverlayProps } from 'rc-dropdown';

These types are useful for defining custom trigger or overlay components and their props. Use `import type` for clarity and compile-time optimization.

This example demonstrates a basic controlled dropdown component with a simple HTML overlay and a button trigger, showcasing `rc-dropdown`'s core usage including visibility management, placement, and basic animation setup.

import React, { useState } from 'react'; import Dropdown from 'rc-dropdown'; import type { DropdownProps } from 'rc-dropdown'; import 'rc-dropdown/assets/index.css'; // Recommended for basic styling structure const menuOverlay = ( <div style={{ padding: '8px', background: '#fff', border: '1px solid #ddd', borderRadius: '4px', boxShadow: '0 2px 8px rgba(0,0,0,0.15)' }}> <p>Dropdown Item 1</p> <p>Dropdown Item 2</p> <p>Dropdown Item 3</p> </div> ); const ControlledDropdown: React.FC = () => { const [visible, setVisible] = useState(false); const handleVisibleChange: DropdownProps['onVisibleChange'] = (newVisible) => { console.log('Dropdown visibility changed:', newVisible); setVisible(newVisible); }; return ( <div style={{ margin: '50px', display: 'inline-block' }}> <Dropdown overlay={menuOverlay} animation="slide-up" placement="bottomLeft" onVisibleChange={handleVisibleChange} visible={visible} trigger={['click']} // Also supports 'hover', 'contextMenu' overlayClassName="my-custom-dropdown-overlay" > <button type="button" style={{ padding: '10px 20px', cursor: 'pointer' }}> {visible ? 'Hide Dropdown' : 'Show Dropdown'} </button> </Dropdown> </div> ); }; export default ControlledDropdown;

Debug

Known issues

breakingVersion `4.0.0` introduced significant internal refactors, specifically "Remove all coupling code" and migrations related to `@rc-component/trigger`. While specific API breaks were not always explicitly detailed in commit messages, these changes could affect custom implementations relying on internal component structure, specific DOM element IDs, or generated CSS class names. Thorough testing is recommended when upgrading from `v3.x` to `v4.x`.

fix

Carefully review the project's official changelog (if available beyond commit history) and perform comprehensive regression testing on components integrating `rc-dropdown` after upgrading. Adapt custom styling or logic that might have relied on previous internal structures.

affects: >=4.0.0

gotchaThe `react-component` ecosystem is undergoing a migration, with new components and potentially future versions of existing components being published under the `@rc-component/` npm scope (e.g., `@rc-component/dropdown`). While `rc-dropdown` is currently active at `v4.2.1`, users should monitor the `react-component` GitHub organization for official announcements regarding migration paths or potential renaming/superseding of `rc-dropdown` by `@rc-component/dropdown` in future major releases.

fix

Stay informed by checking the GitHub repository for `rc-dropdown` and the broader `react-component` organization for any announcements about future migrations or package renames. Plan for potential refactoring when a new `@rc-component/dropdown` is officially stable and recommended for use.

affects: >=4.0.0

gotcha`rc-dropdown` has strict peer dependency requirements for `react` and `react-dom`, specifically `react@>=16.11.0` and `react-dom@>=16.11.0`. Using older versions of React or ReactDOM will lead to runtime errors, including common "Invalid hook call" issues or unexpected rendering behavior.

fix

Ensure your project's `package.json` specifies `react` and `react-dom` versions that satisfy `rc-dropdown`'s peer dependency (e.g., `^16.11.0`, `^17.0.0`, or `^18.0.0`). Run `npm install` or `yarn install` to update your dependencies, and use `npm ls react` and `npm ls react-dom` to verify installed versions.

affects: >=4.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'rc-dropdown' in '...' (webpack error)

The `rc-dropdown` package is not installed in the project's dependencies or there is a typo in the import path.

fix

Install the package using your package manager: `npm install rc-dropdown` or `yarn add rc-dropdown`. Double-check the import statement for correct spelling.

TypeError: Dropdown is not a function (or constructor) / (0, _rcDropdown.default) is not a function

This error typically occurs when attempting to import the `Dropdown` component using incorrect ES Module syntax for a default export, or when mixing CommonJS `require` with ES Modules.

fix

Ensure you are using the correct ES Module default import: `import Dropdown from 'rc-dropdown';`. Avoid `const Dropdown = require('rc-dropdown');` in ES Module contexts or `import { Dropdown } from 'rc-dropdown';` as the component is a default export.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

This is a common error in React indicating a mismatch in `react` or `react-dom` versions, or multiple instances of React being loaded. `rc-dropdown` has a strict peer dependency on `react@>=16.11.0`.

fix

Verify that your project's `react` and `react-dom` versions satisfy `rc-dropdown`'s peer dependency requirement (>=16.11.0). Use `npm ls react` and `npm ls react-dom` to inspect versions. If multiple React instances are present, investigate your bundling configuration to deduplicate `react`.

Upgrade

Version history

4.2.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for building React components.

react-domrequiredPeer dependency for rendering React components to the DOM.

Agent activity

2 hits · last 30 days

node

Resources

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

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