rc-queue-anim

library2.0.0jsnpmunverified

Queue animation component for React that staggers enter/leave animations of children elements. Current stable version is 2.0.0, released rarely (last update 2022). Key differentiator: provides ready-made animation types (alpha, left, right, top, bottom, scale, etc.) and configurable delay, duration, and interval for sequential animations. Requires React >=16.9.0 and is ESM-only. Alternative to react-spring or framer-motion for simple queue animations.

testing

npm install rc-queue-anim

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · RC-QUEUE-ANIM

rc-queue-anim

testingjavascriptv2.0.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

QueueAnim

✓ import QueueAnim from 'rc-queue-anim'

✗ import { QueueAnim } from 'rc-queue-anim'

Default export, not named. No named exports.

QueueAnim

✓ const QueueAnim = require('rc-queue-anim').default

✗ const QueueAnim = require('rc-queue-anim')

In CommonJS, you must use .default because the package has no module.exports assignment.

QueueAnim type definitions

✓ import QueueAnim from 'rc-queue-anim'

✗ import QueueAnim, { QueueAnimProps } from 'rc-queue-anim'

TypeScript types are bundled but not exported as named types; use typeof QueueAnim or inline.

Shows basic queue animation with 'left' type, custom delay range, duration, and interval.

import React from 'react'; import ReactDOM from 'react-dom'; import QueueAnim from 'rc-queue-anim'; const App = () => ( <QueueAnim type="left" delay={[0, 100]} duration={500} interval={200}> <div key="1">First</div> <div key="2">Second</div> <div key="3">Third</div> </QueueAnim> ); ReactDOM.render(<App />, document.getElementById('root'));

Debug

Known issues

breakingUpgrading from 1.x to 2.x: component prop replaced with componentTag; children must have unique keys; animConfig shape changed.

fix

Update usage: use componentTag instead of component, ensure key on every child, follow new animConfig format.

affects: >=2.0.0

breakingDefault export changed: in 1.x both default and named exports existed; 2.x only default export.

fix

Use import QueueAnim from 'rc-queue-anim' instead of import { QueueAnim } from 'rc-queue-anim'.

affects: >=2.0.0

gotchaChildren must have a unique `key` prop; otherwise no animation occurs.

fix

Add key to each child element. Example: <div key="1">...</div>.

affects: all

gotchaOnly direct children are animated; nested components are not supported.

fix

Wrap nested animations in another QueueAnim or use a different animation library.

affects: all

Errors

Common errors & fixes

Cannot read property 'default' of undefined

Using CommonJS require('rc-queue-anim') without .default

fix

Replace with const QueueAnim = require('rc-queue-anim').default; or use import.

Each child in a list should have a unique "key" prop.

Missing key prop on children inside QueueAnim

fix

Add a unique key prop to each child (e.g., <div key="id">).

TypeError: Cannot read properties of undefined (reading 'map')

Passing non-array children or children that are falsy

fix

Ensure QueueAnim has at least one child and children is an array (e.g., use React.Children.toArray).

Failed prop type: Invalid prop `type` of value `fade` supplied to `QueueAnim`, expected one of ["alpha","left","right","top","bottom","scale","scaleBig","scaleX","scaleY"].

Using unsupported animation type

fix

Use one of the valid types: alpha, left, right, top, bottom, scale, scaleBig, scaleX, scaleY.

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for component usage

react-domrequiredPeer dependency required for DOM rendering

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/react-component/queue-anim ↗

packagerc-queue-anim ↗

homepagehttps://github.com/react-component/queue-anim ↗