Open SourceLibraryReact

React Smooth Render.

React Smooth Render is an open-source npm package that solves one of React's most common UX gaps: smooth mount and unmount animations. Using React Fragments, it wraps any component in a visibility toggle with configurable animation timing — without leaving any extra DOM nodes behind.

Open App All Products

Tech Stack

JavaScriptReactnpm

Hosted At

ferrousdesigner.github.io/react-smooth-render

Problem

React components mount and unmount instantly, making it impossible to animate exits natively. CSS transitions can't animate elements that disappear from the DOM before the animation plays.

Solution

React Smooth Render uses a hidden state pattern with React Fragments to delay unmounting until the exit animation completes, all without adding wrapper divs or polluting the DOM.

Key Features

Smooth mount and unmount animations

Built on React Fragments — zero DOM footprint

Configurable timing prop (default 250ms)

initiallyHidden prop for animated entrances

Works with any React component as children

Tiny bundle size — no animation library dependency

Published on npm — install in one command

3+ GitHub stars, production-tested

Case Study

Challenge

React's declarative model makes exit animations nearly impossible without complex lifecycle management or heavy animation libraries.

Approach

Used a hidden state flag to delay DOM removal until CSS transitions complete, wrapped in React Fragments to keep the DOM clean.

Outcome

A 1-import solution to React exit animations, published on npm and used in production projects.