React-Spring Into
Tags: react
Published: 2020-11-09 13:48:16

##Intro
This blog will be an introduction to a react styling tool, react-spring. It adds pizzas through  spring-physics based animations on the webpage. React-Spring is an animation library for moving interfaces. It is set apart from other tools because it both declarative and imperative. Paul Henschel in, [<em>Hooks in react-spring, a tutorial<em>](https://medium.com/@drcmda/hooks-in-react-spring-a-tutorial-c6c436ad7ee4) describes react-spring as render-props driven. They continue to explain that,

>Render props are expressive, explicit, and usually very easy to use. But since it is internally steered imperatively, supporting hooks was just a matter of a couple of lines added to its core.

If you have ever used React Motion or Animated, some compare this as a middle ground between the two. Another feature of react-spring is that it can be integrated with other tools. Since the tool is state based, it uses hooks and can be used with state managers, such as redux. React-spring can also be integrated with react-native, react-native-web and more. 

###5 Basic hooks
There are currently 5 hooks in react-spring, each is listed and briefly explained below. More can be read in their [documentation](https://www.react-spring.io/docs/hooks/basics).
<ul>
<li>useSpring
<ul>
<li>turns any data into animated data, with a single line</li>
</ul>
</li>
<li>useSprings
<ul>
<li>animates data within a list/li>
</ul>
</li>
<li>useTrail
<ul>
<li>multiple springs with a single dataset, one spring follows or trails behind the other</li>
</ul>
</li>
<li>useTransition
<ul>
<li>for mount/unmount transitions (lists where items are added/removed/updated)</li>
</ul>
</li>
<li>useChain
<ul>
<li>to queue or chain multiple animations together</li>
</ul>
</li>
</ul>
##Prerequisites
Before we go any further, this article assumes the following:
<ul>
<li>Node.js ≥v6 is installed on your machine</li>
<li>npm is installed on your machine</li>
<li>You have a basic understanding of React.js</li>
<li>You have a basic understanding of React hooks</li>
</ul>

##Installation
To begin, first you’ll need to set up your react application. I will be using create react app. 
```
npx create-react-app my-react-spring
```
Next cd into the directory and install react-spring.
```
npm install react-spring
```
##Set up
First you’ll import animated and the hook you'll want to use. For this tutorial, we'll use useSpring. 
```
import {useSpring, animated} from 'react-spring'
```
There are two ways you can use react-spring hooks, overwriting or updating existing prop.
####Overwriting Props
```
const props = useSpring({
    opacity: toggle ? true : false,
    marginTop: toggle ? 0 : -500
})
```
####Updating Props
```
const [props, set, stop] = useSpring(() => ({opacity: 1}))
    // Update spring with new props
    set({opacity: toggle ? true : false})
    // Stop animation
    stop()
```
Using the overwriting props method, now it is time to make your animation. 
```
import React, { useState } from 'react';
import { useSpring, animated } from 'react-spring';

const App = () => {
  const animation = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 }
  });

  const colorAnimation = useSpring({
    from: { color: 'blue' },
    to: { color: `rgb(255,0,0)` }
  });

  const multiAnimation = useSpring({
    from: { opacity: 0, color: 'red' },
    to: [
        { opacity: 1, color: '#ffaaee' },
        { opacity: 1, color: 'red' },
        { opacity: .5, color: '#008000' },
        { opacity: .8, color: 'black' }
    ]
  });
  return (
    <div>
      <animated.h1 style={animation}>Hello World</animated.h1>
      <animated.h1 style={colorAnimation}>Hello World</animated.h1>
      <animated.h1 style={multiAnimation}>Hello World</animated.h1>
    </div>
  )
};

export default App;
```
##Conclusion
This example may not be the most glamours, but I hope it helps the concept. Here links to more tutorials on [Digital Ocean](https://www.digitalocean.com/community/tutorials/react-intro-to-react-spring), [Medium](https://medium.com/@drcmda/hooks-in-react-spring-a-tutorial-c6c436ad7ee4), and [LogRocket](https://blog.logrocket.com/animations-with-react-spring/#:~:text=With%20the%20introduction%20of%20hooks,as%20props%20to%20animated%20data.).