@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.