Skip to content

react-component/drawer

Repository files navigation

rc-drawer

NPM version dumi build status codecov node version npm download

Example

https://drawer-react-component.vercel.app/

Usage

import Drawer from 'rc-drawer';
import React from 'react';
import ReactDom from 'react-dom';

ReactDom.render(
  <Drawer>
    {menu children}
  </Drawer>
, mountNode);

Install

rc-drawer

Browser Support

IE Chrome Firefox Opera Safari
IE 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

API

props type default description
className string null -
classNames { mask?: string; content?: string; wrapper?: string; } - pass className to target area
styles { mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } - pass style to target area
prefixCls string 'drawer' prefix class
width string | number null drawer content wrapper width, drawer level transition width
height string | number null drawer content wrapper height, drawer level transition height
open boolean false open or close menu
defaultOpen boolean false default open menu
placement string left left top right bottom
level string | array all With the drawer level element. all/ null / className / id / tagName / array
levelMove number | array | func null level move value. default is drawer width
duration string .3s level animation duration
ease string cubic-bezier(0.78, 0.14, 0.15, 0.86) level animation timing function
getContainer string | func | HTMLElement body Return the mount node for Drawer. if is null use React.creactElement
showMask boolean true mask is show
maskClosable boolean true Clicking on the mask (area outside the Drawer) to close the Drawer or not.
maskStyle CSSProperties null mask style
afterVisibleChange func null transition end callback(open)
onClose func null close click function
keyboard boolean true Whether support press esc to close
autoFocus boolean true Whether focusing on the drawer after it opened
onMouseEnter React.MouseEventHandler<HTMLDivElement> - Trigger when mouse enter drawer panel
onMouseOver React.MouseEventHandler<HTMLDivElement> - Trigger when mouse over drawer panel
onMouseLeave React.MouseEventHandler<HTMLDivElement> - Trigger when mouse leave drawer panel
onClick React.MouseEventHandler<HTMLDivElement> - Trigger when mouse click drawer panel
onKeyDown React.MouseEventHandler<HTMLDivElement> - Trigger when mouse keydown on drawer panel
onKeyUp React.MouseEventHandler<HTMLDivElement> - Trigger when mouse keyup on drawer panel

2.0 Rename onMaskClick -> onClose, add maskClosable.

Development

npm install
npm start