Installations

npm install rc-drawer

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

22.8.0

NPM Version

10.8.3 Score

91.7

Supply Chain

88.2

Quality

85.4

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

11

Total

424

Closed

306

Merged

107

Issues

Open

26

Total

90

Closed

64

Releases

57

v7.3.0

Updated on May 30, 2025

@rc-component/drawer@1.1.0

Updated on May 19, 2025

@rc-component/drawer@1.0.0

Updated on Feb 26, 2025

v8.0.0

Updated on Jan 08, 2025

v7.2.0

Updated on May 30, 2024

v7.1.0

Updated on Feb 07, 2024

View All 57 releases

Languages

3

TypeScript

Less

JavaScript

TypeScript (82.85%)

Less (14.18%)

JavaScript (2.96%)

Developer

react-component

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

421 Stars

473 Commits

99 Forks

20 Watchers

16 Branches

48 Contributors

Updated on Jul 07, 2025

Maintainers

5

View All 48 Contributors

Package Meta Information

Latest Version

7.3.0

Package Id

rc-drawer@7.3.0

Unpacked Size

58.23 kB

Size

9.60 kB

File Count

32

NPM Version

10.8.3

Node Version

22.8.0

Published on

May 30, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

5

@babel/runtime @rc-component/portal classnames rc-motion rc-util

Peer Dependencies

2

react react-dom

Dev Dependencies

28

rc-drawer

Example

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

Usage

1import Drawer from 'rc-drawer';
2import React from 'react';
3import ReactDom from 'react-dom';
4
5ReactDom.render(
6  <Drawer>
7    {menu children}
8  </Drawer>
9, mountNode);

Install

Browser Support


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

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

4

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

3

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

Score

4.1

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to rc-drawer

Other packages similar to rc-drawer

rc-drawer

Installations

Developer Guide

Yes

CommonJS

22.8.0

10.8.3

Score

Pull Requests

11

424

306

107

Issues

26

90

64

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

rc-drawer

Example

Usage

Install

Browser Support

API

Development

10

10

10

10

4

3

0

0

0

0

0

0

0

4.1

/10