^{Using my app is also a way to support me:}

---

@uiw/react-hr

React divider components built on the native <hr> element. The component renders every divider style from props, so consumers do not need to import a stylesheet.

Install

npm install @uiw/react-hr

Usage

import { Hr } from '@uiw/react-hr';

export default function Example() {
  return (
    <>
      <Hr />
      <Hr variant="dashed-fixed" dashedFilled={6} dashedOpen={5} />
      <Hr variant="solid-content" content="分隔线" />
    </>
  );
}

Basic

import { Hr } from '@uiw/react-hr';

export default function Example() {
  return (
    <>
      <Hr />
      <Hr variant="solid" />
    </>
  );
}

Dotted

import { Hr } from '@uiw/react-hr';

export default function Example() {
  return (
    <>
      <Hr variant="dotted" />
      <Hr variant="dotted2" />
    </>
  );
}

Dashed

import { Hr } from '@uiw/react-hr';

export default function Example() {
  return (
    <>
      <Hr variant="dashed" />
      <Hr variant="dashed2" />
    </>
  );
}

Double

import { Hr } from '@uiw/react-hr';

export default function Example() {
  return <Hr variant="double" />;
}

Fixed Dash

Use dashedFilled and dashedOpen to control the visible and empty segments.

import { Hr } from '@uiw/react-hr';

export default function Example() {
  return (
    <>
      <Hr variant="dashed-fixed" />
      <Hr variant="dashed-fixed" dashedFilled={6} dashedOpen={5} />
      <Hr variant="dashed-fixed" dashedFilled={12} dashedOpen={4} />
    </>
  );
}

Fade Edges

import { Hr } from '@uiw/react-hr';

export default function Example() {
  return <Hr variant="edge-weak" />;
}

Twill

import { Hr } from '@uiw/react-hr';

export default function Example() {
  return (
    <>
      <Hr variant="twill" />
      <Hr variant="twill-colorful" />
    </>
  );
}

Wavy And Shadow

import { Hr } from '@uiw/react-hr';

export default function Example() {
  return (
    <>
      <Hr variant="wavy" />
      <Hr variant="shadow" />
    </>
  );
}

Center Decorations

import { Hr } from '@uiw/react-hr';

export default function Example() {
  return (
    <>
      <Hr variant="mid-circle" />
      <Hr variant="mid-square" />
      <Hr variant="mid-circle" multiple />
      <Hr variant="mid-square" multiple />
    </>
  );
}

Edge Decorations

import { Hr } from '@uiw/react-hr';

export default function Example() {
  return (
    <>
      <Hr variant="space-square" />
      <Hr variant="double-arrow" />
    </>
  );
}

Content

import { Hr } from '@uiw/react-hr';

export default function Example() {
  return (
    <>
      <Hr variant="solid-content" content="分隔线" />
      <Hr variant="dashed-content" content="虚线内容" />
      <Hr variant="fade-content" content="两端淡出" />
      <Hr variant="mid-border-content" content="边框内容" />
    </>
  );
}

Custom Colors

import { Hr } from '@uiw/react-hr';

export default function Example() {
  return (
    <>
      <Hr color="#1677ff" />
      <Hr variant="dashed" accentColor="#fa541c" />
      <Hr variant="mid-circle" color="#52c41a" multiple />
      <Hr
        variant="solid-content"
        content="自定义颜色"
        color="#722ed1"
        accentColor="#722ed1"
      />
    </>
  );
}

API

Prop	Type	Default	Description
variant	HrVariant	solid	Divider style.
color	string	#d0d0d5	Primary line and decoration color.
accentColor	string	#a2a9b6	Accent color used by dotted, dashed, and twill variants.
content	string	undefined	Text for content variants.
multiple	boolean	false	Adds repeated center decorations for circle and square variants.
dashedFilled	number | string	4px	Filled segment length for dashed-fixed.
dashedOpen	number | string	6px	Empty segment length for dashed-fixed.
margin	number | string	1.25rem	Vertical divider margin.

All native <hr> attributes are supported except children.

Contributors

As always, thanks to our amazing contributors!

Made with action-contributors.

License

Licensed under the MIT License.