<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.
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 aReactNode, 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.