@highlight-ui/drawer

Installation

Using npm:

npm install @highlight-ui/drawer

Using yarn:

yarn add @highlight-ui/drawer

Using pnpm:

pnpm install @highlight-ui/drawer

In your (S)CSS file:

@import url('@highlight-ui/drawer');

Once the package is installed, you can import the library:

import { Drawer, DrawerHeader, DrawerBody } from '@highlight-ui/drawer';

Usage

import React from 'react';
import { Drawer, DrawerHeader, DrawerBody } from '@highlight-ui/drawer';

export default function DrawerExample() {
  return (
    <Drawer visible={false} onClose={handleOnClose} onOpen={handleOnOpen}>
      <DrawerHeader>
        <Typography component="h1" token="heading-2xl">
          Drawer
        </Typography>
      </DrawerHeader>
      <DrawerBody>Drawer content</DrawerBody>
    </Drawer>
  );
}

Props 📜

Drawer

| Prop | Type | Required | Default | Description | | :---------------------- | :---------------------------- | :------- | :------- | :--------------------------------------------------------------------------------------------- | | visible | boolean | No | false | Controls the visibility of the drawer | | children | React.ReactNode | No | | Should be an instance of DrawerHeader followed by an instance of DrawerBody | | drawerClassName | string | No | | Allows providing a custom class name for the drawer | | closeKey | React.KeyboardEvent['key'] | No | Escape | Event keycode that should trigger the drawer to close | | disabledBodyScrolling | boolean | No | true | Controls the scrolling behavior of the document when the drawer is open | | leftOffset | React.CSSProperties['left'] | No | 280px | Controls the width of the drawer: (100% - leftOffset) | | topOffset | React.CSSProperties['top'] | No | 0px | Controls the height of the drawer: (100% - topOffset) | | onClose | () => void | No | | Callback that is invoked after the drawer is closed | | onOpen | () => void | No | | Callback that is invoked after the drawer is opened | | onRequestToClose | () => void | No | | Callback that is invoked when the close key is pressed (if preventToClose is set to false) | | preventToClose | boolean | No | false | Controls whether the onRequestToClose callback should be executed or not | | enableBackdrop | boolean | No | false | Controls the visibility of the backdrop | | onBackdropClick | () => void | No | | Callback that is invoked when user clicks on the backdrop | | backdropClassName | string | No | | Allows providing a custom class name for the backdrop |

DrawerHeader

| Prop | Type | Required | Default | Description | | :---------- | :-------- | :------- | :------ | :------------------------------------------------------------------ | | fixed | boolean | No | false | Controls whether the drawer header should be fixed (when scrolling) | | className | string | No | | Allows providing a custom class name |

DrawerBody

| Prop | Type | Required | Default | Description | | :---------- | :------- | :------- | :------ | :----------------------------------- | | className | string | No | | Allows providing a custom class name |

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.