Socket
Socket
Sign inDemoInstall

react-transition-group

Package Overview
Dependencies
12
Maintainers
3
Versions
44
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    react-transition-group

A react component toolset for managing animations


Version published
Weekly downloads
9.6M
decreased by-18.06%
Maintainers
3
Install size
1.85 MB
Created
Weekly downloads
 

Package description

What is react-transition-group?

The react-transition-group package provides a way to perform animations and transitions in React applications. It offers components that manage the lifecycle of entering and leaving the DOM, allowing developers to animate these changes.

What are react-transition-group's main functionalities?

Transition

The Transition component lets you describe a transition from one component state to another over time with a simple declarative API. The 'in' prop is used to toggle the visibility of the component.

import { Transition } from 'react-transition-group';

<Transition in={this.state.show} timeout={300}>
  {state => (
    <div className={`fade fade-${state}`}>{this.props.children}</div>
  )}
</Transition>

CSSTransition

The CSSTransition component is a wrapper around the Transition component that lets you define enter and exit transitions using CSS class names. It's useful when you want to apply a set of CSS transitions to a single entering or leaving element.

import { CSSTransition } from 'react-transition-group';

<CSSTransition in={this.state.show} timeout={300} classNames='fade'>
  <div>{this.props.children}</div>
</CSSTransition>

TransitionGroup

The TransitionGroup component manages a set of transition components (like CSSTransition) in a list. When items are added or removed from the list, the TransitionGroup will trigger the enter or exit states for those items.

import { TransitionGroup, CSSTransition } from 'react-transition-group';

<TransitionGroup>
  {this.state.items.map(item => (
    <CSSTransition key={item.id} timeout={500} classNames='item'>
      <div>{item.text}</div>
    </CSSTransition>
  ))}
</TransitionGroup>

SwitchTransition

The SwitchTransition component is used to transition between two elements that switch out with each other. It's useful for transitioning between two components that enter and leave at the same time, like routes or toggling views.

import { SwitchTransition, CSSTransition } from 'react-transition-group';

<SwitchTransition>
  <CSSTransition key={this.state.mode} addEndListener={(node, done) => node.addEventListener('transitionend', done, false)} classNames='fade'>
    <div>{this.state.status}</div>
  </CSSTransition>
</SwitchTransition>

Other packages similar to react-transition-group

Changelog

Source

4.4.5 (2022-08-01)

Bug Fixes

  • apply entering animation synchronously when unmountOnExit or mountOnEnter is enabled (#847) (1043549)

Readme

Source

react-transition-group npm

ATTENTION! To address many issues that have come up over the years, the API in v2 and above is not backwards compatible with the original React addon (v1-stable).

For a drop-in replacement for react-addons-transition-group and react-addons-css-transition-group, use the v1 release. Documentation and code for that release are available on the v1-stable branch.

We are no longer updating the v1 codebase, please upgrade to the latest version when possible

A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind.

Documentation

TypeScript

TypeScript definitions are published via DefinitelyTyped and can be installed via the following command:

npm install @types/react-transition-group

Examples

Clone the repo first:

git@github.com:reactjs/react-transition-group.git

Then run npm install (or yarn), and finally npm run storybook to start a storybook instance that you can navigate to in your browser to see the examples.

Keywords

FAQs

Last updated on 01 Aug 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • 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