rc-motion

library2.9.5jsnpmunverified

rc-motion is a React library designed to provide granular control over component entry, exit, and update animations by leveraging React's lifecycle methods. It enables developers to integrate CSS transition classes or custom JavaScript animation callbacks to manage the visual state of components as they appear, enter, leave, or disappear from the DOM. The package, at version 2.9.5, offers a robust set of features for orchestrating complex animation sequences and serves as a foundational component within the Ant Design ecosystem. Its API, centered around properties like `motionName`, `visible`, and comprehensive lifecycle callbacks (`onAppearStart`, `onEnterEnd`, etc.), emphasizes precise control over animation flow. However, developers should be aware that this specific package (`rc-motion`) has been superseded by `@rc-component/motion` (v1.x), which represents its actively maintained and developed successor.

web-framework

npm install rc-motion

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · RC-MOTION

rc-motion

web-frameworkjavascriptv2.9.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

CSSMotion

✓ import { CSSMotion } from 'rc-motion';

✗ import CSSMotion from 'rc-motion';

CSSMotion is a named export. Default import will result in 'undefined' or a different module object.

CSSMotionList

✓ import { CSSMotionList } from 'rc-motion';

✗ const CSSMotionList = require('rc-motion').CSSMotionList;

While CommonJS require syntax might work, ESM named imports are the standard for modern React applications. The package ships TypeScript types for enhanced development.

CSSMotionProps

✓ import type { CSSMotionProps } from 'rc-motion';

✗ import { CSSMotionProps } from 'rc-motion';

When importing types in TypeScript, use 'import type' for clarity and to ensure type-only imports are correctly handled during transpilation.

Demonstrates basic usage of CSSMotion with state-driven visibility, custom motion classes, and lifecycle callbacks.

import React, { useState } from 'react'; import { CSSMotion } from 'rc-motion'; function MyAnimatedComponent() { const [visible, setVisible] = useState(true); return ( <div> <button onClick={() => setVisible(prev => !prev)}> Toggle Motion </button> <CSSMotion visible={visible} motionName="my-fade" onAppearStart={() => console.log('Appear Start')} onAppearActive={() => console.log('Appear Active')} onAppearEnd={() => console.log('Appear End')} onEnterStart={() => console.log('Enter Start')} onEnterActive={() => console.log('Enter Active')} onEnterEnd={() => console.log('Enter End')} onLeaveStart={() => console.log('Leave Start')} onLeaveActive={() => console.log('Leave Active')} onLeaveEnd={() => console.log('Leave End')} removeOnLeave={true} > {({ className, style }) => ( <div className={className} style={{ ...style, padding: '20px', border: '1px solid blue', backgroundColor: 'lightblue' }} > Hello, Motion! </div> )} </CSSMotion> </div> ); } export default MyAnimatedComponent;

Debug

Known issues

breakingThe `rc-motion` package has been renamed and its active development moved to `@rc-component/motion`. While `rc-motion@2.9.5` is still available, new features and bug fixes are primarily released under the `@rc-component/motion` namespace (v1.x and above).

fix

Consider migrating to `@rc-component/motion` for continued support and updates. Be aware of potential API differences during migration, though core functionality is largely similar.

affects: >=2.x

deprecatedThe `rc-motion` package itself is considered deprecated. Its last major update (v2.9.5) was over two years ago. For actively maintained code, developers should transition to `@rc-component/motion`.

fix

Update your package dependencies from `rc-motion` to `@rc-component/motion` and review its changelog for any breaking changes introduced in its 1.x releases.

affects: >=2.x

gotchaOlder versions of `rc-motion` (before fixes in `@rc-component/motion` v1.1.6) might exhibit 'DOM residue' where elements are not correctly removed from the DOM after leave animations, especially on re-activation or rapid toggling.

fix

Ensure `removeOnLeave` prop is set to `true`. If issues persist, consider updating to `@rc-component/motion` which has addressed these types of bugs.

affects: <=2.9.5

gotchaIssues with ref forwarding to children wrapped by `CSSMotion` have been observed and fixed in later versions of `@rc-component/motion`. If you pass a ref directly to a functional child component within `CSSMotion`, it might not work as expected.

fix

Ensure that any child component receiving a ref is either a class component or a functional component wrapped with `React.forwardRef`. If using an older `rc-motion` version, this might require manual ref handling or migrating to `@rc-component/motion` for the fixes.

affects: <=2.9.5

Errors

Common errors & fixes

ReferenceError: CSSMotion is not defined

Incorrect import statement for the CSSMotion component.

fix

Use a named import: `import { CSSMotion } from 'rc-motion';`

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

A functional component passed as a child to CSSMotion is attempting to receive a ref directly.

fix

Wrap the child functional component with `React.forwardRef` to allow it to correctly receive and forward refs.

Element persists in the DOM after its leave animation finishes, even if it's no longer visible.

The `removeOnLeave` prop is not enabled, or a bug in older versions prevents proper cleanup.

fix

Set the `removeOnLeave` prop on `CSSMotion` to `true`. If the issue persists with `rc-motion@2.9.5`, consider migrating to `@rc-component/motion`.

TypeError: Cannot read properties of undefined (reading 'className') (or 'style')

The render prop function for `CSSMotion` is not correctly destructuring and passing the `className` or `style` props to the rendered element.

fix

Ensure your render prop looks like `{({ className, style }) => <div className={className} style={style} />}` to correctly apply the motion styles.

Upgrade

Version history

2.9.5latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for rendering React components.

react-domrequiredPeer dependency required for interacting with the DOM in React applications.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/react-component/motion ↗

packagehttps://www.npmjs.com/package/rc-motion ↗

homepagehttps://react-component.github.io/motion ↗