Installations
npm install rc-motionDeveloper Guide
Typescript
No
Module System
CommonJS
Node Version
22.5.1
NPM Version
10.8.2
Score
93.3
Supply Chain
93.9
Quality
86.3
Maintenance
100
Vulnerability
100
License
Releases
@rc-component/motion@1.1.3
Updated on Feb 11, 2025
@rc-component/motion@1.1.2
Updated on Feb 11, 2025
@rc-component/motion@1.1.1
Updated on Feb 11, 2025
@rc-component/motion@1.1.0
Updated on Feb 10, 2025
v2.9.5
Updated on Dec 19, 2024
v2.9.4
Updated on Dec 11, 2024
Contributors
Languages
TypeScript (98.84%)
JavaScript (1.06%)
Shell (0.1%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
272,875,546
Last Day
383,044
Last Week
2,060,765
Last Month
8,359,088
Last Year
87,754,051
GitHub Statistics
MIT License
158 Stars
134 Commits
45 Forks
6 Watchers
4 Branches
37 Contributors
Updated on Feb 14, 2025
Bundle Size
18.15 kB
Minified
6.47 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
2.9.5
Package Id
rc-motion@2.9.5
Unpacked Size
104.22 kB
Size
16.86 kB
File Count
55
NPM Version
10.8.2
Node Version
22.5.1
Published on
Dec 19, 2024
Total Downloads
Cumulative downloads
Total Downloads
272,875,546
Last Day
4.3%
383,044
Compared to previous day
Last Week
6.9%
2,060,765
Compared to previous week
Last Month
29%
8,359,088
Compared to previous month
Last Year
15.9%
87,754,051
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
rc-motion
React lifecycle controlled motion library.
Live Demo
https://react-component.github.io/motion/
Install
Example
1import CSSMotion from 'rc-motion'; 2 3export default ({ visible }) => ( 4 <CSSMotion visible={visible} motionName="my-motion"> 5 {({ className, style }) => <div className={className} style={style} />} 6 </CSSMotion> 7);
API
CSSMotion
| Property | Type | Default | Description |
|---|---|---|---|
| motionName | string | - | Config motion name, will dynamic update when status changed |
| visible | boolean | true | Trigger motion events |
| motionAppear | boolean | true | Use motion when appear |
| motionEnter | boolean | true | Use motion when enter |
| motionLeave | boolean | true | Use motion when leave |
| motionLeaveImmediately | boolean | - | Will trigger leave even on mount |
| motionDeadline | number | - | Trigger motion status change even when motion event not fire |
| removeOnLeave | boolean | true | Remove element when motion leave end |
| leavedClassName | string | - | Set leaved element className |
| onAppearStart | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when appear start, return style will patch to element |
| onEnterStart | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when enter start, return style will patch to element |
| onLeaveStart | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when leave start, return style will patch to element |
| onAppearActive | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when appear active, return style will patch to element |
| onEnterActive | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when enter active, return style will patch to element |
| onLeaveActive | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when leave active, return style will patch to element |
| onAppearEnd | (HTMLElement, Event) => boolean | void; | - | Trigger when appear end, will not finish when return false |
| onEnterEnd | (HTMLElement, Event) => boolean | void; | - | Trigger when enter end, will not finish when return false |
| onLeaveEnd | (HTMLElement, Event) => boolean | void; | - | Trigger when leave end, will not finish when return false |
CSSMotionList
extends all the props from CSSMotion
| Property | Type | Default | Description |
|---|---|---|---|
| keys | React.Key[] | - | Motion list keys |
| component | string | React.ComponentType | div | wrapper component |
Development
npm install
npm start
License
rc-motion is released under the MIT license.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
7 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 6
Reason
Found 5/30 approved changesets -- score normalized to 1
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/main.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: 0 commits out of 14 are checked with a SAST tool
Score
4.4
/10
Last Scanned on 2025-02-03
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