React Queue Router

useTransition

Description

useTransition is a hook that tells Queue Router the end of transition animation.

You need to use useTransition in every component that is passed to <Route/> component.

Basic Usage

When just calling useTransition, the transition finishes instantly without any trainstion animation. (In this way, routing works almost same as React Router.)

SomePageComponent.jsx
import React from 'react'
import {useTransition} from 'react-queue-router'

const SomePageComponent = () => {
  useTransition()
  
  return (
    <div>
      {/* some content */}
    </div>
  )
 }
 
export default SomePageComponent

Adding transition animation

If you want to add transition animation, you can pass function as its arguments. The first argument is for the animation for entering, and the second is for leaving.

When you pass your functions, you MUST call release inside them. The app will crush otherwise.

Function for entering will be called only once when the component mounted.

SomePageComponent.jsx
import React from 'react'
import {useTransition} from 'react-queue-router'

const enterAnimation = ({release}) => {
  // Do your fancy animation here.
  // When everything is done, call "release".
  release()
}

const leaveAnimation = ({release}) => {
  // Do your fancy animation here.
  // When everything is done, call "release".
  release()
}

const SomePageComponent = () => {
  useTransition(enterAnimation, leaveAnimation)
  
  return (
    <div>
      {/* some content */}
    </div>
  )
 }
 
export default SomePageComponent

The codes below are equivalent to the above. Choose the one you like.

SomePageComponent.jsx
import React from 'react'
import {useTransition} from 'react-queue-router'

const SomePageComponent = () => {
  useTransition(
    ({release}) => {
      // Do your fancy animation here.
      // When everything is done, call "release".
      release()
    },
    ({release}) => {
      // Do your fancy animation here.
      // When everything is done, call "release".
      release()
    }
  )
  
  return (
    <div>
      {/* some content */}
    </div>
  )
 }
 
export default SomePageComponent
SomePageComponent.jsx
import React from 'react'
import {useTransition} from 'react-queue-router'

const enterAnimation = ({release}) => {
  return new Promise(resolve => {
    // Do your fancy animation here.
    // When everything is done, call "resolve".
    resolve()
  })
}

const leaveAnimation = ({release}) => {
  return new Promise(resolve => {
    // Do your fancy animation here.
    // When everything is done, call "resolve".
    resolve()
  })
}

const SomePageComponent = () => {
  useTransition(
    async ({release}) => {
      await enterAnimation()
      release()
    },
    async ({release}) => {
      await leaveAnimation()
      release()
    }
  )
  
  return (
    <div>
      {/* some content */}
    </div>
  )
 }
 
export default SomePageComponent