mui-label-divider

Labeled divider component for Material-UI / React

Install

npm install --save mui-label-divider

Usage Examples

import { CollapsibleLabelDivider, LabelDivider } from "mui-label-divider";
import { useState } from "react";

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <LabelDivider label="SIMPLE" />
      <LabelDivider label="CLICKABLE" onClick={() => alert("clicked")} />
      <CollapsibleLabelDivider
        label={`${open ? "HIDE" : "SHOW"} CONTENT`}
        open={open}
        onClick={() => setOpen((x) => !x)}
      >
        content
      </CollapsibleLabelDivider>
    </>
  );
}

Credits

Adapted for Material-UI from Puigcerber's original raw html/css solution at https://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle.

Inspired by https://wikiki.github.io/layout/divider/.

License

MIT © gregorychen3