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

export const meta = formatFrontmatterToRemixMeta(frontmatter)

useSpring

Our flagship hook. Applicable to most use-cases. If you want to orchestrate many of these hooks, consider using useSprings.

Usage

Whether you're using a function or not, it's all about passing a config object to the hook.

With a function & deps

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

function MyComponent() {
  const [props, api] = useSpring(
    () => ({
      from: { opacity: 0 },
      to: { opacity: 1 },
    }),
    []
  )

  return <animated.div style={props}>Hello World</animated.div>
}

With a config object

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

function MyComponent() {
  const props = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
  })

  return <animated.div style={props}>Hello World</animated.div>
}

Reference

import { TablesConfiguration } from '../components/Tables/TablesConfig'

Typescript

function useSpring(configuration: ConfigObject): SpringValues

function useSpring(
  configurationFn: () => ConfigObject,
  deps?: any[]
): [springs: SpringValues, api: SpringRef]

Where ConfigObject is described above

TS Glossary

• SpringValues

Examples

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

<ExampleGrid sandboxTitles={[ 'Animating Auto', 'Card', 'Chaining Transition and a Spring', 'CSS Gradients', 'CSS Keyframes', 'CSS Variables', 'Exit Before Enter', 'Flip Card', 'Floating Button', 'Popup Modal', 'Native Slide', 'Noise', 'Rocket decay', 'Svg Filter', 'Tree List', ]} />

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