This package contains a drawer component that can be used to show a drawer on the left or right side of the screen.
Change Log
To use this package, you must install the @pikas-ui/styles package.
You can install this package using npm, yarn, or pnpm.
npm install @pikas-ui/drawer
yarn add @pikas-ui/drawer
pnpm add @pikas-ui/drawer
The drawer component can be used to show a drawer on the left or right side of the screen.
import { Drawer } from '@pikas-ui/drawer';
import { Button } from '@pikas-ui/button';
import { useState } from 'react';
const Example: React.FC = () => {
const [drawerIsOpen, setDrawerIsOpen] = useState(false);
return (
<>
<Button onClick={(): void => setDrawerIsOpen(true)}>Left</Button>
<Drawer
position="left"
title="Left drawer"
isOpen={drawerIsOpen}
onClose={(): void => setDrawerIsOpen(false)}
width={300}
>
<span>Left drawer content</span>
</Drawer>
</>
);
};
Prop | Description | Type | Default |
---|---|---|---|
css | The css of the drawer | DrawerCSS | - |
position | The position of the drawer | DrawerPosition | "right" |
isOpen | If the drawer is open | boolean | - |
padding | The padding of the drawer | DrawerPadding | "md" |
boxShadow | The box shadow of the drawer | PikasShadow | "sm" |
onClose | The function to call when the drawer is closed | () => void | - |
closeIfClickOutside | If the drawer should close when clicking outside | boolean | true |
title | The title of the drawer | string | - |
width | The width of the drawer | number | - |
minWidth | The minimum width of the drawer | number | - |
maxWidth | The maximum width of the drawer | number | "100%" |
height | The height of the drawer | number | - |
minHeight | The minimum height of the drawer | number | - |
maxHeight | The maximum height of the drawer | number | "100%" |
closeIcon | The icon of the close button | FC<IconProps> | - |
children | The children of the drawer | ReactNode | - |
This documentation can be edited on GitHub here