@pikas-ui/drawer

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

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

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

Usage

Drawer

The drawer component can be used to show a drawer on the left or right side of the screen.

Left drawer

Left drawer content

Top drawer

Top drawer content

Bottom drawer

Bottom drawer content

Right drawer

Right drawer content
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>
    </>
  );
};

Props

PropDescriptionTypeDefault
cssThe css of the drawerDrawerCSS-
positionThe position of the drawerDrawerPosition"right"
isOpenIf the drawer is openboolean-
paddingThe padding of the drawerDrawerPadding"md"
boxShadowThe box shadow of the drawerPikasShadow"sm"
onCloseThe function to call when the drawer is closed() => void-
closeIfClickOutsideIf the drawer should close when clicking outsidebooleantrue
titleThe title of the drawerstring-
widthThe width of the drawernumber-
minWidthThe minimum width of the drawernumber-
maxWidthThe maximum width of the drawernumber"100%"
heightThe height of the drawernumber-
minHeightThe minimum height of the drawernumber-
maxHeightThe maximum height of the drawernumber"100%"
closeIconThe icon of the close buttonFC<IconProps>-
childrenThe children of the drawerReactNode-

Contributing

This documentation can be edited on GitHub here