<SmoothTransition /> is a React component for elegantly transitioning between components. Its smooth fading effect and gliding height transition provides a seamless experience for your users as they switch between components.

(Demo Video)

Use your favourite manager to install the package:

yarn add smooth-transition

npm install smooth-transition --save

import { TextField, Typography } from "@mui/material"; import React, { ChangeEventHandler, forwardRef } from "react"; import { SmoothTransition } from "smooth-transition"; type Props = { editMode: boolean; value: string; onChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>; }; export const Example = forwardRef<HTMLDivElement, Props>(function Example( { editMode, value, onChange }, ref ) { return ( <SmoothTransition render={[ (state) => ( <Typography ref={state != "leave" ? ref : undefined}> {value} </Typography> ), (state) => ( <TextField ref={state != "leave" ? ref : undefined} fullWidth multiline value={value} onChange={onChange} /> ), ]} active={!editMode ? 0 : 1} duration={500} /> ); });

The component accepts the following properties:

• render: ((state: "enter" | "active" | "leave") => ReactNode)[]: An array of render functions that return a ReactNode, representing the components that you want to transition between.
• active: number: An integer specifying which component should be displayed.
• duration: number: A number representing the duration of the transition in milliseconds.

This library is licensed under the MIT license.

We welcome contributions to the smooth-transition library. To contribute, simply open a pull request with your changes.