Dialog

The RhDialog component is a custom UI element that is designed to display content in a pop-up dialog window.

Usage

Once installed, you can import the RhDialog component into your React application:

copy

import {RhDialog} from "@rhythm-ui/react"

Then, you can use the RhDialog component in your JSX code:

copy

function Dialog() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <RhButton onClick={() => setOpen(true)} className=" block mx-auto">
        Open Dialog{" "}
      </RhButton>
      <RhDialog
        className="max-w-lg flex flex-col gap-6"
        isOpen={open}
        onClose={() => setOpen(!open)}
      >
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          vulputate risus at nulla varius euismod. Suspendisse vestibulum, enim
          vel ultricies finibus, ipsum urna venenatis nulla, at dignissim mi
          diam in sem. Fusce metus neque, faucibus et risus sit amet, luctus
          faucibus tortor. Sed scelerisque, neque vel efficitur iaculis, nunc
          felis mattis est, id aliquam sapien mauris auctor enim. Nulla
          scelerisque venenatis turpis, sit amet sollicitudin urna congue
          malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Suspendisse vulputate risus at nulla varius euismod. Suspendisse
          vestibulum, enim vel ultricies finibus, ipsum urna venenatis nulla, at
          dignissim mi diam in sem.
        </div>
        <RhButton variant="danger" onClick={() => setOpen(false)}>
          Close Dialog
        </RhButton>
      </RhDialog>
    </>
  );
}

Dialog Props

Name	Type	Description
onClose	() => void	Function executed when the dropdown is closed on backdrop click
isOpen	boolean	Defines if the modal is open
className	string	Custom class to do styling on the dialog
children	React.ReactNode	Provide custom component to dialog
isBackDropDisable	boolean	BackDrop true, it's not show otherwise show
ref	Ref<any>	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
key	Key