---
meta:
  title: useSpring | React Spring
  'og:title': useSpring | React Spring
  'twitter:title': useSpring | React Spring
  description: API documentation for the useSpring hook in React Spring.
  'og:description': API documentation for the useSpring hook in React Spring.
  'twitter:description': API documentation for the useSpring hook in React Spring.
  'og:url': https://www.react-spring.dev/docs/components/use-spring
  'twitter:url': https://www.react-spring.dev/docs/components/use-spring
sidebar_position: 1
---

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`](/docs/components/use-springs).

## Usage

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

### With a function & deps

```jsx lines=1,4-10,12
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

```jsx lines=1,4-7,9
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'

<TablesConfiguration />

## Typescript

```tsx
function useSpring(configuration: ConfigObject): SpringValues

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

Where `ConfigObject` is described [above](#reference)

### TS Glossary

- [`SpringValues`](/docs/typescript#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!](/examples)
