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 use-inertia-simple-page-transition@1.0.1

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.