Dropdown: React
An overlay list of options, which are hidden by default but can be shown by interacting with a button or other component.
Installation
Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.
With that done, you’re now ready to implement the component in your application.
import { Dropdown, DropdownItem } from '@mediahuis/chameleon-react';
export default function Example() {
const anchorRef = React.useRef(null);
return (
<>
<Button ref={anchorRef}>Click here to open</Button>
<Dropdown anchorRef={anchorRef}>
<DropdownItem>
<Dropdown/>
</>
);
}
Dropdown Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
anchorRef | RefObject | - | Yes | Reference to the element which you want to use for positioning of the dropdown. |
children | ReactNode | - | No | The children of the Dropdown component. |
defaultOpen | Boolean | false | No | Determines the visibility state of the dropdown by default. |
id | String | - | Yes | Sets the native HTML id attribute. It will also affect the describedby-id for accessibility reasons. |
placement | Placement | 'bottom-start' | No | Determines where the Dropdown is positioned towards the target element. |
DropdownItem Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
clickable | Boolean | true | No | Determines if clickable styles are added when set to true. |
iconRight | ElementType | - | No | Controls the `as` prop of the Icon on the right side. |
title | ReactNode | - | Yes | The text inside the DropdownItem. |