useSeparator
Provides the accessibility implementation for a separator. A separator is a visual divider between two groups of content, e.g. groups of menu items or sections of a page.
| install | yarn add @react-aria/separator |
|---|---|
| version | 3.1.6 |
| usage | import {useSeparator} from '@react-aria/separator' |
API#
useSeparator(
(props: SeparatorProps
)): SeparatorAria
Features#
Horizontal separators can be built with the HTML <hr>
element. However, there is no HTML element for a vertical separator. useSeparator helps achieve
accessible separators that can be styled as needed.
- Support for horizontal and vertical orientation
- Support for HTML
<hr>element or a custom element type
Anatomy#
A separator consists of a single element that represents the divider.
useSeparator returns props to be spread onto the element:
| Name | Type | Description |
separatorProps | HTMLAttributes<HTMLElement> | Props for the separator element. |
Example#
This example shows how create both a horizontal and a vertical oriented separator.