Overlay

Useful for overlaying all the screen or a content.

() => {
  const [isVisible, setVisible] = React.useState(false);

  return (
    <>
      <Button onClick={() => setVisible(true)}>open overlay</Button>
      <Overlay isVisible={isVisible} onClose={() => setVisible(false)}>
        im overlay
      </Overlay>
    </>
  );
};

() => {
  const [isVisible, setVisible] = React.useState(false);
  return (
    <>
      <Button onClick={() => setVisible(true)}>open overlay</Button>
      <Overlay isVisible={isVisible} onClose={() => setVisible(false)}>
        im overlay
      </Overlay>
    </>
  );
};

Props

Prop	Type	Description
`children`	`ReactNode`	The content to render
`id`	`String`	The id of the overlay
`isVisible`	`Boolean`	Whether it is visible or not
`shouldRemoveBodyScroll`	`Boolean`	Whether it should remove body scroll or not
`onClose`	`Function`	A function to be called when on close

Examples

todo