Using Navi with react-spring

Learn to create simple route transitions using three react hooks from react-spring and react-navi.

Navi works great with react-spring’s useTransition() hook. Together with the useViewElement() and useCurrentRoute() hooks, creating transitions between routes is a walk in the park.

app.js
card.js
index.js
routes.js
import React from 'react'
import { useCurrentRoute, useViewElement } from 'react-navi'
import { animated, useTransition } from 'react-spring'

export default function App() {
  let currentRoute = useCurrentRoute()
  let viewElement = useViewElement()
  let transitions = useTransition(viewElement, currentRoute.url.href, {
    from: { opacity: 0, transform: 'scale(0.5) translateY(-50%)' },
    enter: { opacity: 1, transform: 'scale(1) translateY(0)' },
    leave: { opacity: 0, transform: 'scale(0.5) translateY(50%)' },
  })

  return transitions.map(({ item, props: style, key, state }) =>
    <animated.div key={key} style={{
      ...style,
      position: 'absolute',
      top: 0,
      width: '100%',
    }}>
      {item}
    </animated.div>
  )
}
Build In Progress