/react-transitions

A collection of animated transitions when React components enter or leave the DOM.

Primary LanguageCSSMIT LicenseMIT

react-transitions

Build Status NPM Package Dependency status devDependency status

A collection of transitions to animate React components when they enter or leave the DOM.

Check out the live demo for available built-in animations.

Installation

npm install -s react-transitions

Usage

Import the component

import ReactTransitions from 'react-transitions';

Import the CSS animations

If your project has set up appropriate CSS loaders, just import the CSS

import 'react-transitions/dist/animations.css';

If you need to include the stylesheet otherwise, associate the file here.

Render

<ReactTransitions
  transition="move-to-left-move-from-right"
  width={ 600 }
  height={ 300 }
>
  {/* The child element put here changes with animation. */}
  <img key="uniqueKey" src="..." />
</ReactTransitions>
ReactTransitions Props Type Description
transition string, required See transitions
width number (in px) or string, required
height number (in px) or string, required
children element, or null Restricted to a single element in that it is animated as a whole.

Transitions

This package comes with a set of animated transitions out of the box. ReactTransitions.Transitions makes a list of their names. Each name is a string to be supplied to transition prop of ReactTransitions.

Here are a few of the names for illustration:

  • "move-to-left-move-from-right",
  • "fade-move-from-right",
  • "scale-down-move-from-right",
  • "rotate-right-side-first-move-from-right"

There are some more options ready for you. Either make use of the demo page to see the full list, or dump the contents of ReactTransitions.Transitions which should always be up-to-date.

Acknowledgement

The CSS aminations used in this package are based on resources on Codrops with adequate adoption for React. Thanks for the awesome creation shared by Codrops.

License

MIT. See LICENSE.md for details.