{"library":"react-smooth","title":"React Smooth Animation Library","description":"`react-smooth` is a declarative animation library for React applications, providing components like `Animate` and `AnimateGroup` to facilitate property-based and keyframe-based animations. The current stable version is 4.0.4, which updates peer dependencies to support React 19. The library also supports previous React versions from 16.8 onwards. While its release cadence can be somewhat irregular, it ensures compatibility with modern React ecosystems. Key differentiators include its declarative API for defining animations directly within JSX, support for custom easing functions (Bezier, Spring), and its association with the Recharts library, where it is often used for data visualization animations. It abstracts away complex browser animation APIs, allowing developers to focus on animation logic rather than low-level implementation details. The library ships with TypeScript types, facilitating safer development practices.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-smooth"],"cli":null},"imports":["import { Animate } from 'react-smooth';","import { AnimateGroup } from 'react-smooth';","import { configureBezier } from 'react-smooth';","import { configureSpring } from 'react-smooth';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { Animate } from 'react-smooth';\n\nfunction MyAnimatedComponent() {\n  const [show, setShow] = useState(true);\n\n  return (\n    <div>\n      <button onClick={() => setShow(!show)}>Toggle Animation</button>\n      {show && (\n        <Animate\n          from={{ opacity: 0, transform: 'translateY(-20px)' }}\n          to={{ opacity: 1, transform: 'translateY(0px)' }}\n          duration={1000}\n          easing=\"ease-out\"\n        >\n          {({ opacity, transform }) => (\n            <div\n              style={{\n                opacity,\n                transform,\n                width: '100px',\n                height: '100px',\n                backgroundColor: 'blue',\n                color: 'white',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                marginTop: '20px',\n                borderRadius: '8px'\n              }}\n            >\n              Smoothly Animated!\n            </div>\n          )}\n        </Animate>\n      )}\n    </div>\n  );\n}\n\n// Example of rendering, typically in your App.js or index.js:\n// import ReactDOM from 'react-dom/client';\n// const root = ReactDOM.createRoot(document.getElementById('root'));\n// root.render(<MyAnimatedComponent />);","lang":"typescript","description":"This example demonstrates a basic mount/unmount animation using the `Animate` component with a render prop pattern, toggling its visibility and applying a fade-in and slide-in effect. It showcases `from`, `to`, `duration`, and `easing` props with a functional child component for styling.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}