Side Sheet

Useful for overlaying the screen on one side. It is used to show more details about a certain content.

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

  return (
    <>
      <Button onClick={() => setVisible(true)}>open side sheet</Button>
      <SideSheet isVisible={isVisible} onClose={() => setVisible(false)}>
        im side sheet
      </SideSheet>
    </>
  );
};

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

Props

Prop	Type	Description
`children`	`ReactNode`	The content to render
`width`	`String`	The width of the side sheet
`isVisible`	`Boolean`	Whether it is visible or not
`onClose`	`Function`	A function to be called when on close

Examples

todo