Ecme - The Ultimate Next & TypeScript Web Template

Drawer

Drawer is a panel that slides out from the edge of the screen which containing supplementary content.

Basic

Basic usage of Drawer

Placement

Set the placement prop to 'top', 'right', 'bottom', or 'left' to arrange where the Drawer slide out from.

TopRightBottomLeft

Width & Height

We can adjust Drawer via with height & width prop.

Custom Style

Drawer allow us to set extra class via headerClass, bodyClass & footerClass

Closable

Set closeable to false will hide Drawer close icon.

API

Drawer

Prop	Description	Type	Default
placement	Drawer placement	`'top'` \| `'right'` \| `'bottom'` \| `'left'`	`'right'`
width	Drawer width, (only available when placement is `'left'` or `'right'`	`string` \| `number`	`400`
height	Drawer height, (only available when placement is `'top'` or `'bottom'`	`string` \| `number`	`400`
title	Title of Drawer	`string` \| `ReactNode`	-
footer	Footer of Drawer	`string` \| `ReactNode`	-
headerClass	Extra class for Drawer header (`!` modifier recommended for tailwind css overiding)	`string`	-
bodyClass	Extra class for Drawer body (`!` modifier recommended for tailwind css overiding)	`string`	-
footerClass	Extra class for Drawer footer (`!` modifier recommended for tailwind css overiding)	`string`	-
showBackdrop	Whether the display Drawer backdrop	`boolean`	`true`
lockScroll	Whether to disable window scrolling when Drawer is open	`boolean`	`true`
isOpen	Whether to display Drawer	`boolean`	`false`
style	Style for Drawer & backdrop	`object: { content: object, overlay: object }`	-
portalClassName	Class name that append to Drawer portal	`string`	-
bodyOpenClassName	Class name that append to body while Drawer is open	`string`	-
htmlOpenClassName	Class name that append to html while Drawer is open	`string`	-
overlayClassName	Class name for Drawer backdrop	`string`	-
appElement	Setting external node to Drawer content	`SafeHTMLElement` \| `SafeHTMLCollection` \| `SafeNodeList` \| `SafeHTMLElement[]`	-
onAfterOpen	Callback function after Drawer open	`(overlayElement: HTMLElement, contentElement: HTMLElement) => void`	-
closable	Whether show Drawer close icon	`boolean`	`true`
onClose	Callback function after click on Drawer close icon	`(event: Event) => void`	-
onRequestClose	Callback function after Drawer close	`(event: Event) => void`	-
closeTimeoutMS	Timeout speed during Drawer close	`(event: Event) => void`	`300`
shouldFocusAfterRender	Boolean indicating if the Drawer should be focused after render	`boolean`	`true`
shouldReturnFocusAfterClose	Boolean indicating if the Drawer should restore focus to the element that had focus prior to its display	`boolean`	`true`
preventScroll	Boolean indicating if the Drawer should use the preventScroll flag when restoring focus to the element that had focus prior to its display	`boolean`	`false`
shouldCloseOnOverlayClick	Whether to close Drawer when the backdrop is clicked	`boolean`	`true`
shouldCloseOnEsc	Whether to close Drawer when esc key pressed	`boolean`	`true`
parentSelector	Function that will be called to get the parent element that the Drawer will be attached to	`() => document.body`	`() => document.body`
overlayRef	Drawer backdrop ref	`(node: Node) => void`	-
contentRef	Drawer content ref	`(node: Node) => void`	-

Prop

Description

Type

Default

placement

Drawer placement

'top' | 'right' | 'bottom' | 'left'

'right'

width

Drawer width, (only available when placement is 'left' or 'right'

string | number

400

height

Drawer height, (only available when placement is 'top' or 'bottom'

string | number

400

title

Title of Drawer

string | ReactNode

footer

Footer of Drawer

string | ReactNode

headerClass

Extra class for Drawer header (! modifier recommended for tailwind css overiding)

string

bodyClass

Extra class for Drawer body (! modifier recommended for tailwind css overiding)

string

footerClass

Extra class for Drawer footer (! modifier recommended for tailwind css overiding)

string

showBackdrop

Whether the display Drawer backdrop

boolean

true

lockScroll

Whether to disable window scrolling when Drawer is open

boolean

true

isOpen

Whether to display Drawer

boolean

false

style

Style for Drawer & backdrop

object: { content: object, overlay: object }

portalClassName

Class name that append to Drawer portal

string

bodyOpenClassName

Class name that append to body while Drawer is open

string

htmlOpenClassName

Class name that append to html while Drawer is open

string

overlayClassName

Class name for Drawer backdrop

string

appElement

Setting external node to Drawer content

SafeHTMLElement | SafeHTMLCollection | SafeNodeList | SafeHTMLElement[]

onAfterOpen

Callback function after Drawer open

(overlayElement: HTMLElement, contentElement: HTMLElement) => void

closable

Whether show Drawer close icon

boolean

true

onClose

Callback function after click on Drawer close icon

(event: Event) => void

onRequestClose

Callback function after Drawer close

(event: Event) => void

closeTimeoutMS

Timeout speed during Drawer close

(event: Event) => void

300

shouldFocusAfterRender

Boolean indicating if the Drawer should be focused after render

boolean

true

shouldReturnFocusAfterClose

Boolean indicating if the Drawer should restore focus to the element that had focus prior to its display

boolean

true

preventScroll

Boolean indicating if the Drawer should use the preventScroll flag when restoring focus to the element that had focus prior to its display

boolean

false

shouldCloseOnOverlayClick

Whether to close Drawer when the backdrop is clicked

boolean

true

shouldCloseOnEsc

Whether to close Drawer when esc key pressed

boolean

true

parentSelector

Function that will be called to get the parent element that the Drawer will be attached to

() => document.body

overlayRef

Drawer backdrop ref

(node: Node) => void

contentRef

Drawer content ref

(node: Node) => void