1.10.2 • Published 2 years ago
react-transitions-library v1.10.2
React-Transitions-Library
Installation
Install react-tranisions-library
via yarn
or npm
yarn
yarn add react-transitions-library react-transition-group
npm
npm install react-transitions-library react-transition-group
Docs
Available Transition
- OpacityTransition
- FadeInTransition
- FadeOutTransition
- FadeInUpTransition
- FadeOutDownTransition
- ZoomTransition
- ZoomInTransition
- ZoomOutTransition
- BackdropTransition
- BlurTransition
- ScaleTransition
- SlideYTransition
- TranslateTransition
- ShakeTransition
- Custom Transition
Examples
Single Transition
const Example = () => {
const [show, setShow] = useState(false);
return (
<div>
<FadeInTransition timeout={400} from={0} to={1} in={show}>
React Transitions Library
</FadeInTransition>
<button onClick={() => setShow(true)}>in</button>
<button onClick={() => setShow(false)}>out</button>
</div>
);
}
Combined Transition
const Example = () => {
const [show, setShow] = useState(false);
return (
<div>
<FadeInTransition in={show} timeout={400} from={0} to={1}>
<ZoomInTransition in={show} from={0.8} to={1} timeout={400}>
<h1>React Transitions Library</h1>
</ZoomInTransition>
</FadeInTransition>
<button onClick={() => setShow(true)}>in</button>
<button onClick={() => setShow(false)}>out</button>
</div>
);
}
Transition Group
Transition on mount and on unmount.
const FadeInZoomInTransition = ({ children, ...props }) => (
<FadeInTransition {...props} timeout={400} from={0} to={1}>
<ZoomInTransition {...props} from={0.8} to={1} timeout={400}>
{children}
</ZoomInTransition>
</FadeInTransition>
);
const Example = () => {
const [show, setShow] = useState(false);
return (
<div>
<TransitionGroup>
{show ? (
<FadeInZoomInTransition key={"FadeInZoomInTransition"}>
<h1>React Transitions Library</h1>
</FadeInZoomInTransition>
) : null}
</TransitionGroup>
<button onClick={() => setShow(true)}>in</button>
<button onClick={() => setShow(false)}>out</button>
</div>
);
}
Note
Feel free to create a Pull Request.
1.10.2
2 years ago
1.10.1
2 years ago
1.10.0
2 years ago
1.9.8
2 years ago
1.9.7
2 years ago
1.9.6
2 years ago
1.9.5
2 years ago
1.9.4
2 years ago
1.9.3
2 years ago
1.9.2
2 years ago
1.9.1
2 years ago
1.9.0
2 years ago
1.8.3
2 years ago
1.8.2
2 years ago
1.8.1
2 years ago
1.8.0
2 years ago
1.7.0
2 years ago
1.6.4
2 years ago
1.6.3
2 years ago
1.6.2
2 years ago
1.6.1
2 years ago
1.6.0
2 years ago
1.5.9
2 years ago
1.5.8
2 years ago
1.4.8
2 years ago
1.4.7
2 years ago
1.4.6
2 years ago
1.4.5
2 years ago
1.4.4
2 years ago
1.3.4
2 years ago
1.3.3
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.2.0
2 years ago
1.1.0
2 years ago
1.0.0
2 years ago