smooth-transition
v1.0.11
Published
Smooth transition between React components.
Downloads
34
Maintainers
Readme
<SmoothTransition />
<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.
Installation
Use your favourite manager to install the package:
yarn add smooth-transition
npm install smooth-transition --save
Example
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}
/>
);
});
Properties
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.
License
This library is licensed under the MIT license.
Contributing
We welcome contributions to the smooth-transition
library. To contribute, simply open a pull request with your changes.