@types/react-transition-group

What is @types/react-transition-group?

The @types/react-transition-group package provides TypeScript type definitions for the react-transition-group library, which is a React component toolset for managing animations and transitions. It allows developers to define entering and exiting transitions for components in React applications.

What are @types/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 example shows a fade effect applied to a component.

{"import React from 'react';\nimport { Transition } from 'react-transition-group';\n\nconst duration = 300;\n\nconst defaultStyle = {\n  transition: `opacity ${duration}ms ease-in-out`,\n  opacity: 0,\n};\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered:  { opacity: 1 },\n  exiting:  { opacity: 0 },\n  exited:  { opacity: 0 },\n};\n\nconst Fade = ({ in: inProp }) => (\n  <Transition in={inProp} timeout={duration}>\n    {state => (\n      <div style={{\n        ...defaultStyle,\n        ...transitionStyles[state]\n      }}>\n        I'm a fade Transition!\n      </div>\n    )}\n  </Transition>\n);"}

CSSTransition

CSSTransition applies a pair of class names during the appear, enter, and exit states of the transition. The example demonstrates how to use it for a fade effect.

{"import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nconst Fade = ({ in: inProp }) => (\n  <CSSTransition\n    in={inProp}\n    timeout={300}\n    classNames='fade'\n  >\n    <div className='fade'>I'm a fade CSSTransition!</div>\n  </CSSTransition>\n);\n\n// CSS\n.fade-enter {\n  opacity: 0.01;\n}\n.fade-enter-active {\n  opacity: 1;\n  transition: opacity 300ms ease-in;\n}\n.fade-exit {\n  opacity: 1;\n}\n.fade-exit-active {\n  opacity: 0.01;\n  transition: opacity 300ms ease-in;\n}"}

TransitionGroup

TransitionGroup manages a set of transition components (like CSSTransition) in a list. It's useful for animating lists or groups of elements entering and exiting. The example shows a todo list where items fade in and out.

{"import React from 'react';\nimport { TransitionGroup, CSSTransition } from 'react-transition-group';\n\nfunction TodoList({ todos }) {\n  return (\n    <TransitionGroup className='todo-list'>\n      {todos.map(({ id, text }) => (\n        <CSSTransition\n          key={id}\n          timeout={500}\n          classNames='item'\n        >\n          <div>{text}</div>\n        </CSSTransition>\n      ))}\n    </TransitionGroup>\n  );\n}"}

Other packages similar to @types/react-transition-group

framer-motion

Framer Motion is a popular library for animations in React. It offers more comprehensive animation features like spring physics and gesture animations, compared to react-transition-group which focuses on simpler transition effects.

react-spring

React Spring is a spring-physics based animation library that can be used to create a wide variety of animations. It provides more control over animations compared to react-transition-group, especially for complex animations based on physics.

react-motion

React Motion is a library that simplifies the implementation of animations in React applications. It focuses on a more declarative way to define animations using spring configurations, offering a different approach compared to react-transition-group's transition and CSS-based animations.

README

Installation

npm install --save @types/react-transition-group

Summary

This package contains type definitions for react-transition-group (https://github.com/reactjs/react-transition-group).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-transition-group.

Additional Details

• Last updated: Wed, 11 Dec 2024 14:36:56 GMT
• Dependencies: none
• Peer dependencies: @types/react

Credits

These definitions were written by Karol Janyst, Epskampie, Masafumi Koba, and Ben Grynhaus.