Live code
Storybook
Usage
Dropdown
Usage
import { Dropdown, DropdownTrigger, DropdownPopover } from '@lmc-eu/spirit-web-react/components';
const [isOpen, setIsOpen] = React.useState(false);
const onToggle = () => setIsOpen(!isOpen);
<Dropdown id="dropdown-example" isOpen={isOpen} onToggle={onToggle}>
<DropdownTrigger elementType="button">Trigger button</DropdownTrigger>
<DropdownPopover>…</DropdownPopover>
</Dropdown>;Dropdown with Item
Enhance your DropdownPopover by incorporating the versatile Item component. Explore additional examples and insights within the dedicated documentation for the Item component.
import { useState } from 'react';
const [isOpen, setIsOpen] = useState(false);
const onToggle = () => setIsOpen(!isOpen);
<Dropdown id="dropdown-example" isOpen={isOpen} onToggle={onToggle}>
<DropdownTrigger elementType="button">Trigger button</DropdownTrigger>
<DropdownPopover>
<Item elementType="a" href="#" label="Item label" />
</DropdownPopover>
</Dropdown>;Uncontrolled dropdown
import { UncontrolledDropdown, DropdownTrigger, DropdownPopover } from '@lmc-eu/spirit-web-react/components';
<UncontrolledDropdown id="uncontrolled-dropdown-example">
<DropdownTrigger elementType="button">Trigger button</DropdownTrigger>
<DropdownPopover>…</DropdownPopover>
</UncontrolledDropdown>API
Dropdown
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| enableAutoClose | bool | true | ✕ | Enables close on click outside of Dropdown |
| fullWidthMode | DropdownFullwidthMode | off | ✕ | Full-width mode |
| id | string | — | ✓ | Component id |
| isOpen | bool | false | ✓ | Open state |
| onAutoClose | (event: Event) => void | — | ✕ | Callback on close on click outside of Dropdown |
| onToggle | () => void | — | ✓ | Function for toggle open state of dropdown |
| placement | Placement dictionary | bottom-start | ✕ | Alignment of the component |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
DropdownTrigger
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | [string | ReactNode] | — | ✓ | Content of trigger element |
| elementType | [string | ReactNode] | button | ✕ | Element type of dropdown trigger |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
DropdownPopover
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | [string | ReactNode] | — | ✓ | Content of trigger element |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
UncontrolledDropdown
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| enableAutoClose | bool | true | ✕ | Enables close on click outside of Dropdown |
| fullWidthMode | DropdownFullwidthMode | off | ✕ | Full-width mode |
| id | string | <random> | ✕ | Component id |
| onAutoClose | (event: Event) => void | — | ✕ | Callback on close on click outside of Dropdown |
| placement | Placement dictionary | bottom-start | ✕ | Alignment of the component |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.