use-inertia-simple-page-transition
v1.1.0
Published
React hook that triggers css transitions inside Inertia layouts
Downloads
15
Maintainers
Readme
use-inertia-simple-page-transition
Simple and very tiny React 18 hook that triggers css page transitions inside Inertia layouts.
Installation
npm i use-inertia-simple-page-transition
Inertia < 1.0 supported until version 1.0.1
npm i [email protected]
Using React > 18 with Inertia is perfectly fine. If you see errors during install, make sure to ignore them adding the flag --legacy-peer-deps
.
npm i use-inertia-simple-page-transition --legacy-peer-deps
Example
Using animate.css classes.
// in LayoutWithPageTransition.jsx
import usePageTransition from 'use-inertia-simple-page-transition'
export default function LayoutWithPageTransition(Page) {
const transitionClass = usePageTransition({
onEnter: 'animate__fadeIn',
onLeave: 'animate__fadeOut'
})
return <div className={
`other classes animate__animated ${transitionClass}`
}>{ Page }</div>
}
Caveat
The returned value is a reactive class string that should be assigned to a tag that wraps the entire { Page }
, otherwise the transition won't work.
Note
This package was mainly built for keeping my own code dry using multiple layout components and for learning purposes.
Feel free to clone, fork or send a pull request to improve it.