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.

import {useSeparator} from '@react-aria/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>
</>

import {useSeparator} from '@react-aria/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>
</>

import {useSeparator} from '@react-aria/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>
</>