---
meta:
  title: Components | React Spring
  'og:title': Components | React Spring
  'twitter:title': Components | React Spring
  description: API documentation overview for the components available in React Spring.
  'og:description': API documentation overview for the components available in React Spring.
  'twitter:description': API documentation overview for the components available in React Spring.
  'og:url': https://www.react-spring.dev/docs/components
  'twitter:url': https://www.react-spring.dev/docs/components
sidebar_position: 4
noSubnav: true
---

# Component APIs

## Hooks vs Components

As with all our APIs we have a component and hook version. We personally
recommend using the hook version as it is more inline with react's vision
of the future of react. However, we understand there are codebases out there
that still use class components and we want to support those too.

The typical format for importing the component version is to remove the `use` part of the name, e.g.

```jsx
import { useSpring } from '@react-spring/web'

// becomes

import { Spring } from '@react-spring/web'
```

All the props remain the same. It's just a light wrapper and uses a `render props` method:

```jsx
import { Spring } from '@react-spring/web'

const MyComponent = () => {
  return (
    <Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
      {style => <animated.div style={style} />}
    </Spring>
  )
}
```
