{"library":"react-simple-animate","title":"React Simple Animate","description":"React Simple Animate is a lightweight library providing declarative animation capabilities for React applications. It enables developers to implement animations from style A to style B, CSS keyframes animations, and chain multiple animations into sequences. Currently stable at version 3.5.3, it maintains an active release cadence with frequent minor updates focusing on bug fixes, type improvements, and React version compatibility, including support for React 19. Key differentiators include its minimal footprint and lack of external dependencies beyond React itself, making it an efficient choice for adding performant UI animations without bloat. It provides both component-based (`Animate`, `AnimateKeyframes`, `AnimateGroup`) and hook-based (`useAnimate`, `useAnimateKeyframes`, `useAnimateGroup`) APIs to suit different development styles, offering flexibility for both simple transitions and complex choreographed sequences.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-simple-animate"],"cli":null},"imports":["import { Animate } from 'react-simple-animate'","import { useAnimate } from 'react-simple-animate'","import { AnimateKeyframes } from 'react-simple-animate'","import { AnimateGroup } from 'react-simple-animate'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from \"react\";\nimport { Animate, AnimateKeyframes, AnimateGroup } from \"react-simple-animate\";\n\nexport default () => (\n  <>\n    {/* animate individual element. */}\n    <Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}>\n      <h1>React simple animate</h1>\n    </Animate>\n    \n    {/* animate keyframes with individual element. */}\n    <AnimateKeyframes\n      play\n      iterationCount=\"infinite\"\n      keyframes={[\"opacity: 0\", \"opacity: 1\"]}\n    >\n      <h1>React simple animate with keyframes</h1>\n    </AnimateKeyframes>\n    \n    {/* animate group of animation in sequences */}\n    <AnimateGroup play>\n      <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={0}>\n        first\n      </Animate>\n      <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={1}>\n        second\n      </Animate>\n      <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={2}>\n        third\n      </Animate>\n    </AnimateGroup>\n  </>\n);\n","lang":"typescript","description":"This example demonstrates the usage of `Animate`, `AnimateKeyframes`, and `AnimateGroup` components to create individual, keyframe, and sequenced UI animations in React.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}