Drawer

v.2.1.0

Installation

yarn

yarn add @mercell/drawer-react

pnpm

pnpm add @mercell/drawer-react

npm

npm install --save @mercell/drawer-react

The Drawer has necessary peerDependencies, please make sure that you have them in your project

"@carbon/icons-react": "^10.49.0",
"@mercell/portal-react"": "^2.0.0",
"@mercell/tailwind": "^6.0.1",
"@mercell/use-media-query-react-hook": "^3.0.5",
"@mercell/use-on-outside-click-react-hook": "^3.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Using the Date Picker component is as simple as importing it like this.

import { Drawer } from '@mercell/drawer-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want! const DrawerExample = () => { const [isDrawerVisible, toggleDrawerVisibility] = React.useState<boolean>(false); const openDrawer = () => toggleDrawerVisibility(true); const closeDrawer = () => toggleDrawerVisibility(false); return ( <div> <Button scheme="primary" className="ignore-outside-click" onClick={openDrawer} > Open Drawer </Button> <Drawer drawerTitle="Title" isDrawerVisible={isDrawerVisible} onCloseCallback={closeDrawer} // showBackdrop ignoreOutsideClickClassName='ignore-outside-click' shouldCloseOnOutsideClick /> </div>); } render( <DrawerExample/> )

// You can play with code, with HTML tags and text as much as you want!
const DrawerExample = () => {
    const [isDrawerVisible, toggleDrawerVisibility] = React.useState<boolean>(false);
    const openDrawer = () => toggleDrawerVisibility(true);
    const closeDrawer = () => toggleDrawerVisibility(false);
    return (
        <div>
            <Button
                scheme="primary"
                className="ignore-outside-click"
                onClick={openDrawer}
            >
                Open Drawer
            </Button>
            <Drawer
                drawerTitle="Title"
                isDrawerVisible={isDrawerVisible}
                onCloseCallback={closeDrawer}
                // showBackdrop
                ignoreOutsideClickClassName='ignore-outside-click'
                shouldCloseOnOutsideClick
            />
        </div>);
}
render(
    <DrawerExample/>
)

Result

Types, definitions, etc.

Types

DrawerProps

interface DrawerProps {
  isDrawerVisible: boolean;
  onCloseCallback: () => void;
  drawerTitle?: ReactNode;
  shouldCloseOnOutsideClick?: boolean;
  parent?: HTMLElement;
  parentClassName?: string;
  closeCrossButtonAriaLabel?: string;
  ignoreOutsideClickClassName?: string;
  showBackdrop?: boolean;
  isOutsideClickDisabled?: boolean;
  makeDrawerWithInert?: boolean;
} & JSX.IntrinsicElements['button'];

Name	Type	Default	Required	Description
isDrawerVisible	boolean	false	yes	State value to set drawer visible or not
onCloseCallback	() => void	-	yes	Callback action which will happen on close
drawerTitle	ReactNode	''	no	Title inside drawer
shouldCloseOnOutsideClick	boolean	false	no	Allowing to close drawer when click outside the drawer
parent	HTMLElement	document.body	no	Element where portal will mount itself
closeCrossButtonAriaLabel	string	'Close'	no	Aria label for close button
ignoreOutsideClickClassName	string	'ignore-outside-click'	no	Class name which is set inside e.g. button which is triggering drawer
showBackdrop	boolean	false	no	Option to dim the background when drawer is open

Changelog

Change Log - @mercell/drawer-react

This log was last generated on Tue, 14 Mar 2023 09:45:44 GMT and should not be manually modified.

2.1.0

Tue, 14 Mar 2023 09:45:44 GMT

Minor changes

• forward className to portal; allow to use custom drawer's parent; ability to disable overflow on body

2.0.3

Fri, 10 Mar 2023 10:26:54 GMT

Patches

• Fix props pass to two elements

2.0.2

Fri, 10 Mar 2023 10:18:10 GMT

Patches

• Add props to access header header text and close button to customize

2.0.1

Fri, 10 Mar 2023 09:48:39 GMT

Patches

• Add inert bool prop to drawer, wrap header with header tag

2.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

• New styling approach - use only tailwind classes, add tailwind-merge library

1.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

• Migration to Tailwind3, React 18 and ViteJS from webpack.

0.0.7

Tue, 12 Jul 2022 10:42:52 GMT

Patches

• Adjustment of component to use new version of outsideClickHook

0.0.6

Thu, 30 Jun 2022 10:57:49 GMT

Patches

• Package.json refactor, add test suite, more tests soon

0.0.5

Mon, 13 Jun 2022 14:37:54 GMT

Patches

• tone down the shadow, fix the width on mobile

0.0.4

Fri, 03 Jun 2022 13:08:46 GMT

Patches

• Zindex adjustment

0.0.3

Wed, 25 May 2022 08:16:55 GMT

Patches

• Add overflow hidden to body when drawer is visible

0.0.2

Fri, 08 Apr 2022 10:19:50 GMT

Patches

• New component with reusable portal

Figma

Sometimes it can take some time until Figma will render component inside embed iframe. Try to click plus icon to 'reset' initial loader. (Works only in Chrome)

Click me to open figma in the new card