Gathering detailed insights and metrics for rc-drawer
Gathering detailed insights and metrics for rc-drawer
Installations
npm install rc-drawerDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
22.8.0
NPM Version
10.8.3
Releases
57
Languages
3
TypeScript
Less
JavaScript
TypeScript (82.85%)
Less (14.18%)
JavaScript (2.96%)
Developer
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
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
Dev Dependencies
28
@ant-design/icons@rc-component/father-plugin@testing-library/jest-dom@testing-library/react@types/classnames@types/jest@types/raf@types/react@types/react-dom@types/warningantddumieslinteslint-plugin-jesteslint-plugin-unicornfatherglobhuskylesslint-stagednpprettierrc-testreactreact-domstylelintstylelint-config-standard-lesstypescript
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, addmaskClosable.
Development
npm install
npm start
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
0 existing vulnerabilities detected
Reason
Found 9/19 approved changesets -- score normalized to 4
Reason
4 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 3
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/react-component-ci.yml:5: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/drawer/react-component-ci.yml/master?enable=pin
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/react-component-ci.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 1 commits out of 23 are checked with a SAST tool
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