import { formatFrontmatterToRemixMeta } from '../helpers/meta'

export const meta = formatFrontmatterToRemixMeta(frontmatter)

useTransition

This hook is best suited for animating in & out datasets or items you don't particularly want to be left in the DOM, e.g. a dialog.

Usage

useTransition depends on an array of data. That data can be anything you want, we use a lot of internals to track each datum including inferring the keys, this is the first argument. The second is a config object, which is different to useSpring or useSprings so take note!

With a function & deps

import { useTransition, animated } from '@react-spring/web'

function MyComponent({ data = [1, 2, 3] }) {
  const [transitions, api] = useTransition(data, () => ({
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 1 },
  }))

  return transitions((style, item) => (
    <animated.div style={style}>{item}</animated.div>
  ))
}

With a config object

import { useTransition, animated } from '@react-spring/web'

function MyComponent({ data = [1, 2, 3] }) {
  const transitions = useTransition(data, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 1 },
  })

  return transitions((style, item) => (
    <animated.div style={style}>{item}</animated.div>
  ))
}

Transition function

The transition function takes a render function as an argument. This is how we append keys. From the example above you can see we pass a style argument to the function, this style object relates to the state of the animation, e.g. if the animation is ENTERING then the we use the keys from the enter property of of your config object. For a deeper dive into the function signature see the Typescript section.

Reference

Item is defined a lot below, it's automatically inferred from what you pass as the content of the array you pass as the first argument to the hook. Therefore, if you passed [1, 2, 3] then Item would be number.

import { TablesConfiguration } from '../components/Tables/TablesConfig' import { TRANSITION_CONFIG_DATA } from '../data/fixtures'

Typescript

function useTransition<Item extends any>(
  data: Item[],
  configuration: ConfigObject
): TransitionFn<Item>

function useTransition<Item extends any>(
  data: Item[],
  configurationFn: () => ConfigObject
  deps?: any[]
): [transition: TransitionFn<Item>, api: SpringRef]

type TransitionFn = (
  style: SpringValues,
  item: Item,
  transitionState: TransitionState<Item>,
  index: number
) => ReactNode

Where ConfigObject is described above

TS Glossary

• TransitionState

Examples

import { ExampleGrid } from '../components/Grids/ExampleGrid'

<ExampleGrid sandboxTitles={[ 'Basic Transition', 'Chaining Transition and a Spring', 'Exit Before Enter', 'Image Fade', 'List Reordering', 'Masonry Grid', 'Multistage Transitions', 'Notification Hub', ]} />

Can't find what you're looking for? Check out all our examples!