@highlight-ui/drawer

@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.