React Spring v9 useTransition Help

[tnorlund]

I've recently switched over to React Spring v9, and my Gatsby site is now raising errors. I have a toggle to switch dark mode on and off, but I was using useTransition to handle the transition of the svg icons coming in and out. How would I handle useTransition using the React Spring v9?

import React from 'react'
import { useTransition } from 'react-spring'
import { useDarkMode } from 'hooks'
import { Box, Div, Icons } from './styles'

const modes = {
  light: [`Light Mode`, Icons.Sun, `dark`],
  dark: [`Dark Mode`, Icons.Moon, `osPref`],
  osPref: [`OS setting`, Icons.SunMoon, `light`],
}

export default function DarkToggle( { size = `1em`, ...rest } ) {
  const [colorMode, setColorMode] = useDarkMode()
  if ( colorMode && ![`light`, `dark`, `osPref`].includes( colorMode ) )
    console.error( `Invalid color mode: ${colorMode}` )

  const transitions = useTransition( // <- worked in v8, not in v9
    colorMode,
    null,
    {
      initial: null,
      from: { opacity: 0, transform: `translateX(100%)` },
      enter: { opacity: 1, transform: `translateX(0%)` },
      leave: { opacity: 0, transform: `translateX(-100%)` },
    }
  )

  return (
    <Box {...rest}>
      {transitions.map( ( { item, props: style, key } ) => {
        // Since we can't know the value of media queries or localStorage
        // during SSR, defer any rendering of the toggle until after
        // rehydration on the client.
        if ( !item ) return null
        const [title, Icon, nextMode] = modes[item]
        return (
          <Div key={key} style={style}>
            <Icon
              size={size} title={title} onClick={
                () => setColorMode( nextMode )
              }
            />
          </Div>
        )
      } )}
    </Box>
  )
}

[joshuaellis]

Have you checked out the docs – https://react-spring.io/hooks/use-transition ?

In short the second argument of useTransition should be the props – you dont need keys anymore, and transitions.map becomes transitions where the arguments are (styles, item), again you don't need the keys, they're applied automatically.

[tnorlund]

Haven't looked at the docs since they were updated to reflect v9. Thanks!