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.

API#

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:

Example#

This example shows how create both a horizontal and a vertical oriented separator.

function Separator(props) {
  let {separatorProps} = useSeparator(props);

  return (
    <div 
      {...separatorProps}
      style={{
        background: 'gray',
        width: props.orientation === 'vertical' ? '1px' : '100%',
        height: props.orientation === 'vertical' ? '100%' : '1px',
        margin: props.orientation === 'vertical' ? '0 5px' : '5px 0'
      }} />
  );
}

<>
  <div style={{display: 'flex', flexDirection: 'column'}}>
    Content above
    <Separator />
    Content below
  </div>

  <div style={{display: 'flex', flexDirection: 'row', marginTop: 20, height: 40, alignItems: 'center'}}>
    Content left
    <Separator orientation="vertical" />
    Content right
  </div>
</>