0.1.1 • Published 5 years ago
react-use-transition v0.1.1
react-use-transition
React hook for managing state transitions.
Install
# yarn
yarn add react-use-transition react
# npm
npm install react-use-transition react
Example
import React, { useEffect, useState } from "react";
import { useTransition } from "react-use-transition";
const fadeStyle = {
entering: {
opacity: 1,
transition: "opacity 300ms ease-in"
},
entered: {
opacity: 1
},
exiting: {
opacity: 0,
transition: "opacity 300ms ease-in"
},
exited: {
opacity: 0
}
};
export default function App() {
const timeoutDelay = 300;
const [transitionIn, setTransitionIn] = useState(false);
const [transitionState, endTransition] = useTransition(
transitionIn,
timeoutDelay // default is 500
);
useEffect(() => {
setTransitionIn(true); // trigger transition
}, []);
return (
<h1 style={fadeStyle[transitionState]} onTransitionEnd={endTransition}>
Hello World!
</h1>
);
}