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.

installyarn add @react-aria/separator
version3.1.3
usageimport {useSeparator} from '@react-aria/separator'
View ARIA spec
W3C
View repository
GitHub
View package
NPM

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:

NameTypeDescription
separatorPropsHTMLAttributes<HTMLElement>Props for the separator 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>
</>
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>
</>
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>
</>