useDivider

Headless hook for building content separators with custom markup.

Fast setup, no credit card required.

Cancel anytime from your account.

basic-demo

Usage#

import { useDivider } from '@primereact/headless/divider';
 
const { rootProps } = useDivider({ orientation: 'horizontal' });
 
return <div {...rootProps} role="separator" />;

useDivider returns spread-ready rootProps with orientation and alignment attributes — see Primitive for a component-based API.

Features#

Spread-ready rootProps with orientation and alignment data attributes
Stateless hook — no internal state or side effects
Full control over border styling and content layout

Behavior#

Orientation#

Set orientation to "horizontal" or "vertical". The value is reflected in aria-orientation and data-orientation via rootProps.

const { rootProps } = useDivider({ orientation: 'vertical' });
 
<div {...rootProps} role="separator" />;

Content#

Place content alongside the divider element. Layout and alignment are handled in the consuming component.

const { rootProps } = useDivider({ align: 'center' });
 
<div {...rootProps} role="separator">
    <span>OR</span>
</div>;

Custom Styling with Data Attributes#

[data-scope='divider'][data-part='root'] {
    border-top: 1px solid #e5e7eb;
}
[data-scope='divider'][data-orientation='vertical'] {
    width: 1px;
    align-self: stretch;
}
[data-scope='divider'][data-align='center'] {
    text-align: center;
}

API#

useDivider#

Name	Type	Default
`align`	`"center"` \| `"top"` \| `"bottom"` \| `"left"` \| `"right"`	—
Alignment of the content.
`orientation`	`"horizontal"` \| `"vertical"`	`horizontal`
Specifies the orientation, valid values are 'horizontal' and 'vertical'.
`type`	`"solid"` \| `"dashed"` \| `"dotted"`	`solid`
Border style type.

Accessibility#

See Divider Primitive for WAI-ARIA compliance details and keyboard support.