{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-dropdown"],"cli":null},"imports":["import Dropdown from 'rc-dropdown';","import type { DropdownProps } from 'rc-dropdown';","import type { TriggerProps, OverlayProps } from 'rc-dropdown';"],"auth":{"required":false,"env_vars":[]},"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  <div style={{\n    padding: '8px',\n    background: '#fff',\n    border: '1px solid #ddd',\n    borderRadius: '4px',\n    boxShadow: '0 2px 8px rgba(0,0,0,0.15)'\n  }}>\n    <p>Dropdown Item 1</p>\n    <p>Dropdown Item 2</p>\n    <p>Dropdown Item 3</p>\n  </div>\n);\n\nconst ControlledDropdown: React.FC = () => {\n  const [visible, setVisible] = useState(false);\n\n  const handleVisibleChange: DropdownProps['onVisibleChange'] = (newVisible) => {\n    console.log('Dropdown visibility changed:', newVisible);\n    setVisible(newVisible);\n  };\n\n  return (\n    <div style={{ margin: '50px', display: 'inline-block' }}>\n      <Dropdown\n        overlay={menuOverlay}\n        animation=\"slide-up\"\n        placement=\"bottomLeft\"\n        onVisibleChange={handleVisibleChange}\n        visible={visible}\n        trigger={['click']} // Also supports 'hover', 'contextMenu'\n        overlayClassName=\"my-custom-dropdown-overlay\"\n      >\n        <button type=\"button\" style={{ padding: '10px 20px', cursor: 'pointer' }}>\n          {visible ? 'Hide Dropdown' : 'Show Dropdown'}\n        </button>\n      </Dropdown>\n    </div>\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}