@mshafiqyajid/react-divider
Headless divider hook and styled component. Horizontal and vertical orientation, six tones, solid/dashed/dotted lines, optional centered label.
Playground #
Horizontal with label
Section title
Toned dashed
Vertical between items
HomeAboutContact
Or continue with
Props
TSX
import { DividerStyled } from "@mshafiqyajid/react-divider/styled";
import "@mshafiqyajid/react-divider/styles.css";
<DividerStyled
label="Or continue with"
/>Install #
npm install @mshafiqyajid/react-dividerQuick start #
import { DividerStyled } from "@mshafiqyajid/react-divider/styled";
import "@mshafiqyajid/react-divider/styles.css";
// Simple horizontal rule
<DividerStyled />
// With centered label
<DividerStyled label="Or continue with" />
// Label aligned to start
<DividerStyled label="Section" labelAlign="start" />
// Toned and dashed
<DividerStyled tone="primary" lineStyle="dashed" />
// Vertical (inside a flex row)
<div style={{ display: "flex", alignItems: "center", height: "2rem" }}>
<span>Home</span>
<DividerStyled orientation="vertical" spacing="sm" />
<span>About</span>
</div>Headless #
import { useDivider } from "@mshafiqyajid/react-divider";
function MyDivider({ vertical }: { vertical?: boolean }) {
const { dividerProps } = useDivider({
orientation: vertical ? "vertical" : "horizontal",
});
return (
<hr
{...dividerProps}
className="my-divider"
/>
);
}API — DividerStyled #
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Divider direction. Vertical dividers stretch to the parent flex container height |
| label | ReactNode | — | Optional label rendered between two lines |
| labelAlign | "start" | "center" | "end" | "center" | Horizontal position of the label (horizontal dividers only) |
| tone | "neutral" | "primary" | "success" | "warning" | "danger" | "info" | "neutral" | Line color |
| lineStyle | "solid" | "dashed" | "dotted" | "solid" | CSS border style of the line |
| size | "sm" | "md" | "lg" | "md" | Line thickness — sm/md = 1 px, lg = 2 px |
| spacing | "sm" | "md" | "lg" | "md" | Margin around the divider (top/bottom for horizontal, left/right for vertical) |
| className | string | — | Extra class on the root element |
| style | CSSProperties | — | Inline style override |
API — useDivider hook #
| Option | Type | Description |
|---|---|---|
| orientation | "horizontal" | "vertical" | Sets aria-orientation on the separator |
Returns dividerProps — spread onto your element to get role="separator" and the correct aria-orientation.