{"library":"react-transition-group","title":"React Transition Group","description":"React Transition Group is a set of low-level primitive components for managing component states over time, specifically designed to facilitate animations in React applications. It enables developers to define and control lifecycle events for components entering, exiting, or remaining in the DOM. The current stable version is 4.4.5, last updated in August 2022, with a release cadence focused on stability and compatibility with React's evolving ecosystem. This library doesn't dictate specific animation libraries or CSS frameworks; instead, it provides hooks and class toggles (`CSSTransition`) that allow integration with arbitrary CSS transitions/animations or JavaScript animation libraries. Its key differentiator is providing an unopinionated, foundational API for animation patterns, contrasting with higher-level animation libraries that often bundle their own animation engines or opinions.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-transition-group"],"cli":null},"imports":["import { Transition } from 'react-transition-group';","import { CSSTransition } from 'react-transition-group';","import { TransitionGroup } from 'react-transition-group';","import { SwitchTransition } from 'react-transition-group';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\n\n// Basic CSS for demonstration (e.g., in App.css or a style tag)\n/*\n.item-enter {\n  opacity: 0;\n}\n.item-enter-active {\n  opacity: 1;\n  transition: opacity 500ms ease-in;\n}\n.item-exit {\n  opacity: 1;\n}\n.item-exit-active {\n  opacity: 0;\n  transition: opacity 500ms ease-out;\n}\n*/\n\ninterface TodoItemProps {\n  todo: string;\n  onRemove: () => void;\n}\n\nconst TodoItem: React.FC<TodoItemProps> = ({ todo, onRemove }) => (\n  <div className=\"todo-item\" onClick={onRemove}>\n    {todo}\n  </div>\n);\n\nconst App: React.FC = () => {\n  const [todos, setTodos] = useState<string[]>([\"Learn React\", \"Build something\", \"Deploy it\"]);\n  const [newTodo, setNewTodo] = useState<string>('');\n  const nextId = React.useRef(todos.length);\n\n  const handleAddTodo = () => {\n    if (newTodo.trim() === '') return;\n    setTodos([...todos, newTodo.trim()]);\n    setNewTodo('');\n    nextId.current++;\n  };\n\n  const handleRemoveTodo = (indexToRemove: number) => {\n    setTodos(todos.filter((_, index) => index !== indexToRemove));\n  };\n\n  return (\n    <div>\n      <h1>Animated Todo List</h1>\n      <input\n        type=\"text\"\n        value={newTodo}\n        onChange={(e) => setNewTodo(e.target.value)}\n        onKeyDown={(e) => e.key === 'Enter' && handleAddTodo()}\n        placeholder=\"Add a new todo\"\n      />\n      <button onClick={handleAddTodo}>Add Todo</button>\n      <TransitionGroup component=\"ul\" style={{ listStyle: 'none', padding: 0 }}>\n        {todos.map((todo, index) => (\n          <CSSTransition\n            key={todo + index} // Using todo + index for a unique key, though real apps might use a stable ID\n            timeout={500}\n            classNames=\"item\"\n            nodeRef={React.createRef<HTMLLIElement>()} // Required for Strict Mode and React 18+\n          >\n            {(state) => (\n              <li ref={state.nodeRef} style={{marginBottom: '5px'}}>\n                <TodoItem todo={todo} onRemove={() => handleRemoveTodo(index)} />\n              </li>\n            )}\n          </CSSTransition>\n        ))}\n      </TransitionGroup>\n    </div>\n  );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);\n","lang":"typescript","description":"This quickstart demonstrates animating a list of items entering and exiting using `TransitionGroup` and `CSSTransition`, applying basic CSS classes for fade effects. It also addresses the `nodeRef` requirement for React Strict Mode.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}