React-Spring Into

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, Hooks in react-spring, a tutorial 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.

• useSpring
  • turns any data into animated data, with a single line
• useSprings
  • animates data within a list/li>
• useTrail
  • multiple springs with a single dataset, one spring follows or trails behind the other
• useTransition
  • for mount/unmount transitions (lists where items are added/removed/updated)
• useChain
  • to queue or chain multiple animations together

Prerequisites

Before we go any further, this article assumes the following:

• Node.js ≥v6 is installed on your machine
• npm is installed on your machine
• You have a basic understanding of React.js
• You have a basic understanding of React hooks

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, Medium, and LogRocket.