react-component/dropdown

README

@rc-component/dropdown

_{Part of the Ant Design ecosystem.}

🔽 A trigger-driven dropdown component for React.

Highlights

Built on @rc-component/trigger.
Supports hover, click, context menu, and custom trigger actions.
Accepts a React element or render function as dropdown overlay.
Supports align point behavior and trigger-width matching.

Install

npm install @rc-component/dropdown

Usage

import Dropdown from '@rc-component/dropdown';
import '@rc-component/dropdown/assets/index.css';

export default function App() {
  return (
    <Dropdown overlay={<div>Dropdown content</div>} trigger={['click']}>
      <button type="button">Open</button>
    </Dropdown>
  );
}

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Additional props are passed to the underlying @rc-component/trigger component.

Property	Description	Type	Default
alignPoint	Align popup to the click point	boolean	false
animation	Popup animation name	string	-
arrow	Whether to show dropdown arrow	boolean	false
getPopupContainer	Container where dropdown is rendered	`(node: HTMLElement) => HTMLElement`	`() => document.body`
minOverlayWidthMatchTrigger	Whether overlay width should be at least trigger width	boolean	`true` unless `alignPoint` is set
openClassName	Class name added to trigger when dropdown is open	string	`${prefixCls}-open`
overlay	Dropdown overlay	`React.ReactElement \| (() => React.ReactElement)`	-
overlayClassName	Additional overlay class name	string	-
overlayStyle	Overlay style	`React.CSSProperties`	-
placement	Dropdown placement	string	`bottomLeft`
prefixCls	Component class name prefix	string	`rc-dropdown`
transitionName	Popup transition class name	string	-
trigger	Trigger action	`ActionType \| ActionType[]`	`['hover']`
open	Controlled open state	boolean	-
onOverlayClick	Callback when overlay is clicked	`(event: Event) => void`	-
onOpenChange	Callback when the open state changes	`(open: boolean) => void`	-

visible and onVisibleChange have been removed. Use open and onOpenChange instead. This is a breaking API change; callers must migrate when upgrading.

Clicking the overlay closes an uncontrolled dropdown and calls onOverlayClick, without calling onOpenChange.

Development

npm install
npm start

The dumi site runs at http://localhost:8000 by default.

npm test
npm run tsc
npm run lint
npm run compile
npm run build

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/dropdown is released under the MIT license.