react-smooth

library4.0.4jsnpmunverified

`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.

web-framework

npm install react-smooth

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-SMOOTH

react-smooth

web-frameworkjavascriptv4.0.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Animate

✓ import { Animate } from 'react-smooth';

✗ const Animate = require('react-smooth').Animate;

Primary animation component. The library primarily uses ES modules. Named imports are the standard.

AnimateGroup

✓ import { AnimateGroup } from 'react-smooth';

✗ import AnimateGroup from 'react-smooth/lib/AnimateGroup';

Used for coordinating animations among a group of children. Access directly from the main package import.

configureBezier

✓ import { configureBezier } from 'react-smooth';

✗ const configureBezier = require('react-smooth').configureBezier;

Function to create custom Bezier easing functions. Also available via named import.

configureSpring

✓ import { configureSpring } from 'react-smooth';

Function to create custom Spring easing functions.

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.

import React, { useState } from 'react'; import { Animate } from 'react-smooth'; function MyAnimatedComponent() { const [show, setShow] = useState(true); return ( <div> <button onClick={() => setShow(!show)}>Toggle Animation</button> {show && ( <Animate from={{ opacity: 0, transform: 'translateY(-20px)' }} to={{ opacity: 1, transform: 'translateY(0px)' }} duration={1000} easing="ease-out" > {({ opacity, transform }) => ( <div style={{ opacity, transform, width: '100px', height: '100px', backgroundColor: 'blue', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '20px', borderRadius: '8px' }} > Smoothly Animated! </div> )} </Animate> )} </div> ); } // Example of rendering, typically in your App.js or index.js: // import ReactDOM from 'react-dom/client'; // const root = ReactDOM.createRoot(document.getElementById('root')); // root.render(<MyAnimatedComponent />);

Debug

Known issues

breakingVersion 4.0.0 dropped support for React versions older than 16.8. Applications using React < 16.8 must upgrade React or remain on `react-smooth` v3.x.

fix

Upgrade your project's React and React-DOM dependencies to version 16.8.0 or higher. For example, `npm install react@^18.0.0 react-dom@^18.0.0`.

affects: >=4.0.0

breakingVersion 4.0.0 upgraded `react-transition-group` to v4.x. While `react-smooth` abstracts much of this, direct interactions or custom configurations relying on older `react-transition-group` APIs might require adjustments.

fix

Review any custom logic or configuration that explicitly interacts with `react-transition-group` APIs if you experience issues. Consult `react-transition-group` v4 documentation for breaking changes.

affects: >=4.0.0

gotchaVersion 4.0.2 was a 'bad version' released due to an in-progress TypeScript refactor, leading to potential issues and inconsistencies. It's strongly advised to avoid this specific version.

fix

If you inadvertently installed version 4.0.2, downgrade to 4.0.1 or upgrade to 4.0.3+ immediately using `npm install react-smooth@4.0.1` or `npm install react-smooth@latest`.

affects: 4.0.2

breakingThe `translateStyle` utility function, which added compatible prefixes to styles, was removed in version 3.0.0. If your application relied on this function for styling, it will break.

fix

Replace usages of `translateStyle` with modern CSS-in-JS solutions or post-processing tools that handle vendor prefixes, such as PostCSS with Autoprefixer, or update your styles manually if prefixes are critical for specific targets.

affects: >=3.0.0

Errors

Common errors & fixes

Error: Invalid hook call. Hooks can only be called inside of the body of a functional component.

This error typically occurs when `react-smooth` is used with an incompatible or multiple versions of React, or when Hooks are used incorrectly outside a functional component context. Version 4.x explicitly requires React 16.8+ for Hooks.

fix

Ensure React and React-DOM are at least version 16.8.0 and that you don't have multiple copies of React bundled. Check your component structure to ensure Hooks (even indirectly used by `react-smooth` components) are within functional components.

Warning: Invalid DOM property `class`. Did you mean `className`?

While `react-smooth` components might pass props, this warning indicates using `class` instead of `className` in JSX when defining elements within your `react-smooth` child components or other React components. This is a common React footgun.

fix

Always use `className` instead of `class` when specifying CSS classes for DOM elements within JSX. Review your code for `<div class="my-class" />` and change it to `<div className="my-class" />`.

TypeError: Cannot read properties of undefined (reading 'map') or similar when dealing with data.

This usually indicates that `react-smooth` is trying to animate or render over data (e.g., in a list) that is `undefined` or `null` before asynchronous data fetching completes.

fix

Implement conditional rendering or optional chaining (`?.`) to ensure that data is available before `react-smooth` components attempt to process it. For example, `{data && <AnimateGroup>{data.map(...) }</AnimateGroup>}`.

Upgrade

Version history

4.0.4latest on npm

Audit

Dependencies

reactrequiredPeer dependency, required for all React component usage.

react-domrequiredPeer dependency, required for rendering React components.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/recharts/react-smooth ↗

packagehttps://www.npmjs.com/package/react-smooth ↗