{"id":11631,"library":"rc-dropdown","title":"rc-dropdown UI Component","description":"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.","status":"active","version":"4.2.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/dropdown","tags":["javascript","react","react-dropdown","typescript"],"install":[{"cmd":"npm install rc-dropdown","lang":"bash","label":"npm"},{"cmd":"yarn add rc-dropdown","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-dropdown","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for building React components.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The primary component is a default export. While older documentation might show CommonJS `require`, modern React projects should use the ES Module default import.","wrong":"const Dropdown = require('rc-dropdown');\nimport { Dropdown } from 'rc-dropdown';","symbol":"Dropdown","correct":"import Dropdown from 'rc-dropdown';"},{"note":"Use `import type` for importing type definitions to ensure they are stripped from the JavaScript output, adhering to modern TypeScript best practices.","wrong":"import { DropdownProps } from 'rc-dropdown';","symbol":"DropdownProps","correct":"import type { DropdownProps } from 'rc-dropdown';"},{"note":"These types are useful for defining custom trigger or overlay components and their props. Use `import type` for clarity and compile-time optimization.","wrong":"import { TriggerProps, OverlayProps } from 'rc-dropdown';","symbol":"TriggerProps / OverlayProps","correct":"import type { TriggerProps, OverlayProps } from 'rc-dropdown';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport Dropdown from 'rc-dropdown';\nimport type { DropdownProps } from 'rc-dropdown';\nimport 'rc-dropdown/assets/index.css'; // Recommended for basic styling structure\n\nconst menuOverlay = (\n
\n );\n};\n\nexport default ControlledDropdown;","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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`.","severity":"breaking","affected_versions":">=4.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=4.0.0"},{"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.","message":"`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.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The `rc-dropdown` package is not installed in the project's dependencies or there is a typo in the import path.","error":"Module not found: Can't resolve 'rc-dropdown' in '...' (webpack error)"},{"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.","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.","error":"TypeError: Dropdown is not a function (or constructor) / (0, _rcDropdown.default) is not a function"},{"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`.","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`.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."}],"ecosystem":"npm"}