Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

react-transitions

Package Overview
Dependencies
4
Maintainers
1
Versions
5
Issues
File Explorer

Advanced tools

react-transitions

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

    1.0.0latest
    Github

Version published
Maintainers
1
Weekly downloads
645
increased by36.65%

Weekly downloads

Readme

Source

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.

Demo

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 PropsTypeDescription
transitionstring, requiredSee transitions
widthnumber (in px) or string, required
heightnumber (in px) or string, required
childernelement, or nullRestricted 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.

Keywords

FAQs

Last updated on 10 Jun 2017

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc