rc-dropdown UI Component

4.2.1 · active · verified Sun Apr 19

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.

Common errors

```
Module not found: Can't resolve 'rc-dropdown' in '...' (webpack error)
```
cause 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
```
cause 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.
```
cause 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`.

Warnings

breaking Version `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.
gotcha The `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.
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.

Install

npm install rc-dropdown npm
yarn add rc-dropdown yarn
pnpm add rc-dropdown pnpm

Imports

Dropdown
wrong:
```
const Dropdown = require('rc-dropdown');
import { Dropdown } from 'rc-dropdown';
```
correct:
```
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
wrong:
```
import { DropdownProps } from 'rc-dropdown';
```
correct:
```
import type { 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
wrong:
```
import { TriggerProps, OverlayProps } from 'rc-dropdown';
```
correct:
```
import type { 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.

Quickstart

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;

view raw JSON →