Gathering detailed insights and metrics for rc-queue-anim
Gathering detailed insights and metrics for rc-queue-anim
Installations
npm install rc-queue-animDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
12.18.3
NPM Version
6.14.6
Score
86.1
Supply Chain
93.1
Quality
77.7
Maintenance
100
Vulnerability
98.4
License
Releases
3
Languages
2
TypeScript
JavaScript
TypeScript (67.05%)
JavaScript (32.95%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
475 Stars
303 Commits
38 Forks
11 Watchers
14 Branches
32 Contributors
Updated on Jun 07, 2025
Maintainers
1
Package Meta Information
Latest Version
2.0.0
Package Id
rc-queue-anim@2.0.0
Size
10.92 kB
NPM Version
6.14.6
Node Version
12.18.3
Published on
Jul 22, 2021
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
rc-queue-anim
Animate React Component in queue, thanks to rc-animate and enter-animation.
Example
2.x: https://queue-anim.vercel.app/
1.x: http://react-component.github.io/queue-anim/examples/
Usage
1import QueueAnim from 'rc-queue-anim'; 2import React from 'react'; 3import ReactDom from 'react-dom'; 4 5ReactDom.render( 6 <QueueAnim> 7 <div key="1">enter in queue</div> 8 <div key="2">enter in queue</div> 9 <div key="3">enter in queue</div> 10 </QueueAnim> 11, mountNode);
Install
Browser Support
 |  |  |  |  |
|---|---|---|---|---|
| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
1.7.x add childRefs and currentRef;
1<QueueAnim 2 component={Row} 3 ref={(c) => { 4 this.ref = c; 5 }} 6 onEnd={() => { 7 // this..currentRef = <Row /> 8 // this..childRefs.a = <Col key="a">1212</Col> 9 }} 10> 11 <Col key="a">1212</Col> 12</QueueAnim>
API
You must provide the key attribute for all children of QueueAnim, children would not peform any animation without key.
| props | type | default | description |
|---|---|---|---|
| type | string / array | right | Animation Styles alpha left right top bottom scale scaleBig scaleX scaleY |
| animConfig | object / array | null | Custom config, See below for more details animConfig |
| delay | number / array | 0 | delay of animation |
| duration | number / array | 450 | duration of animation |
| interval | number / array | 100 | interval of duration |
| leaveReverse | boolean | false | reverse animation order at leave |
| ease | string / array | easeOutQuart | animation easing config like 'ease', ['easeIn', 'easeOut'], [[.42,0,.58,1], [.42,0,.58,1]]: more |
| appear | boolean | true | whether support appear anim |
| component | string / React.Element | div | component tag |
| componentProps | Object | null | component is React.Element, component tag props |
| animatingClassName | array | ['queue-anim-entering', 'queue-anim-leaving'] | className to every element of animating |
| forcedReplay | boolean | false | leave animation moment trigger enter, forced replay. |
| onEnd | function | null | animation end callback({ key, type }), type: enter or leave |
Above props support array format, like
['left', 'top'], the secord item is leave config. Demo
animConfig
Data fall into three categories：
-
Custom set start:
{ opacity:[1, 0] }；
default；
type:{ opacity: Array<end, start> }；
leave automatic reverse:{ opacity: Array<start, end> }； -
Custom:
{ opacity: 0 }；
Start position is not set。 -
Array:
[{ opacity:[1, 0] }, { opacity:[1, 0] }]；
type:[{ opacity: Array<end, start> }, { opacity: Array<start, end>}]
Development
npm install
npm start
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
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
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
Found 0/16 approved changesets -- score normalized to 0
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/queue-anim/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/queue-anim/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/queue-anim/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/queue-anim/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/queue-anim/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/queue-anim/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/queue-anim/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:73: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/queue-anim/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:76: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/queue-anim/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:82: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/queue-anim/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:96: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/queue-anim/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:99: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/queue-anim/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:105: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/queue-anim/main.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/main.yml:28
- Warn: downloadThenRun not pinned by hash: .github/workflows/main.yml:112
- Info: 0 out of 13 GitHub-owned GitHubAction dependencies pinned
- Info: 1 out of 2 npmCommand dependencies pinned
- Info: 0 out of 1 downloadThenRun dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
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
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 15 are checked with a SAST tool
Score
3.4
/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