# rc-motion > React lifecycle controlled motion library Latest version **2.9.5** (published 2024-12-19) · MIT license · 0 weekly downloads ## Install ```sh npm install rc-motion pnpm add rc-motion yarn add rc-motion bun add rc-motion ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score. Warnings: low downloads. Negative: stale. ## Facts | | | |---|---| | Version | 2.9.5 | | Published | 2024-12-19 | | First published | 2020-08-05 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 104.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 178 | | Maintainers | afc163, zombiej, 07akioni, madccc | | Keywords | react, react-component, react-motion, motion, antd, ant-design | ## Links - npm: https://www.npmjs.com/package/rc-motion - Repository: https://github.com/react-component/motion - Homepage: https://react-component.github.io/motion - Issues: http://github.com/react-component/motion/issues - npm.io page: https://npm.io/package/rc-motion ## Dependencies (3) - [rc-util](https://npm.io/package/rc-util.md) ^5.44.0 - [classnames](https://npm.io/package/classnames.md) ^2.2.1 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.11.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.9.5 (latest) — 2024-12-19 - 2.9.4 — 2024-12-11 - 2.9.3 — 2024-09-19 - 2.9.2 — 2024-06-17 - 2.9.1 — 2024-05-16 - 2.9.0 — 2023-09-05 - 2.8.0 — 2023-08-31 - 2.7.3 — 2023-04-18 - 2.7.2 — 2023-04-18 - 2.7.1 — 2023-04-18 - 2.7.0 — 2023-04-18 - 2.6.3 — 2023-01-09 - 2.6.2 — 2022-07-19 - 2.6.1 — 2022-07-19 - 2.6.0 — 2022-05-05 - … 30 more at https://npm.io/package/rc-motion/versions ## README # rc-motion [![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url] [npm-image]: http://img.shields.io/npm/v/rc-motion.svg?style=flat-square [npm-url]: http://npmjs.org/package/rc-motion [travis-image]: https://img.shields.io/travis/react-component/motion/master?style=flat-square [travis-url]: https://travis-ci.com/react-component/motion [github-actions-image]: https://github.com/react-component/motion/workflows/CI/badge.svg [github-actions-url]: https://github.com/react-component/motion/actions [codecov-image]: https://img.shields.io/codecov/c/github/react-component/motion/master.svg?style=flat-square [codecov-url]: https://app.codecov.io/gh/react-component/motion [david-url]: https://david-dm.org/react-component/motion [david-image]: https://david-dm.org/react-component/motion/status.svg?style=flat-square [david-dev-url]: https://david-dm.org/react-component/motion?type=dev [david-dev-image]: https://david-dm.org/react-component/motion/dev-status.svg?style=flat-square [download-image]: https://img.shields.io/npm/dm/rc-motion.svg?style=flat-square [download-url]: https://npmjs.org/package/rc-motion [bundlephobia-url]: https://bundlephobia.com/package/rc-motion [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-motion [dumi-url]: https://github.com/umijs/dumi [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square React lifecycle controlled motion library. ## Live Demo https://react-component.github.io/motion/ ## Install [![rc-motion](https://nodei.co/npm/rc-motion.png)](https://npmjs.org/package/rc-motion) ## Example ```js import CSSMotion from 'rc-motion'; export default ({ visible }) => ( {({ className, style }) =>
} ); ``` ## 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](#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. --- _Source: https://npm.io/package/rc-motion · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._