React Spring Overview of Props

In this article, we will learn the overview of props in React Spring. React spring is an animation library that makes animating UI elements simple. It is based on spring physics which helps it to achieve a natural look and feel. It is different from other animation libraries where someone has to deal with curves, easing, and time durations, all of which are in sync with each other.

Platforms: React spring is a cross-platform library, it supports react, react-native, web, and many more platforms. It also has support for all browsers.

Props: It is an object on which we perform some animation like looping.

The properties used in the props are listed below:

Property-Name	Type	Description
from	obj	This property is the initial point of the animation.
to	obj/fn/array(obj)	This property is the final point of the animation.
loop	obj/fn/bool	If this property value is set to true then the loop will run.
delay	number/fn	This property is used to define the delay of the animation.
immediate	bool/fn	This property is used to define the immediate property of the animation.
config	obj/fn	This property is used to define the config of the animation.
reset	bool	This property is used to define the reset property of the animation.
reverse	bool	This property is used to define the reverse property of the animation.
cancel	bool/string/fn	This property is used to set the cancel property of the animation. If it is set to true then it will stop the animation.
pause	bool	This property is used to set the pause property of the animation. If it is set to true then it will pause the animation.
events	fn	This property is used to define the event of the animation.

Steps to create React App are:

Step 1: Create a new application using the following command.

npx create-react-app reactspringdemo

Step 2: Now move the created project folder using the following command.

cd reactspringdemo

Step 3: Install the react spring library.

npm install react-spring

Project Structure: It will look like the following.

Example1: In the below code we will learn about prop using the above syntax.

GFG.jsx

Javascript

import React from 'react';
import { useSpring, animated } from 'react-spring'

const LoopingCard = () => {

    /**
    * Define the style for the animation
    * using the useSpring hook
    */
    const styles = useSpring({
        loop: true,
        from: { rotateZ: 0 },
        to: { rotateZ: 360 },
        duration: 2000,
    });

    /**
    * Animated div is the extended version of div that
    * accepts the properties defined above.
    */
    return (<animated.div
        style={{
            width: 80,
            height: 80,
            backgroundColor: 'd6d6d6',
            borderRadius: 16,
            boxShadow: 'rgb(0,0,0,0.44) 0px 5px 5px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'green',
            margin: 250,
            ...styles,
        }} >GFG</animated.div>
    );
}

export default LoopingCard;

App.js

Javascript

import React from 'react'
import GFG from './GFG'

function App() {
    console.log('hello')
    return (
        <>
            <GFG />
        </>
    );
}

export default App;

Steps to run the Application: Write the below code in the terminal to run the application:

npm start

Output:

Example2: In the below code we will learn about prop using the above syntax.

GFG.jsx

Javascript

import React from 'react';
import { useSpring, animated } from 'react-spring'

const LoopingCard = () => {

    /**
    * Define the style for the animation
    * using the useSpring hook
    */
    const styles = useSpring({
        loop: true,
        cancel: true,
        from: { rotateZ: 0 },
        to: { rotateZ: 360 },
        duration: 2000,
    });

    /**
    * Animated div is the extended version of div that
    * accepts the properties defined above.
    */
    return (<animated.div
        style={{
            width: 80,
            height: 80,
            backgroundColor: 'd6d6d6',
            borderRadius: 16,
            boxShadow: 'rgb(0,0,0,0.44) 0px 5px 5px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'green',
            margin: 250,
            ...styles,
        }} >GFG</animated.div>
    );
}

export default LoopingCard;

App.js

Javascript

import React from 'react'
import GFG from './GFG'

function App() {
    console.log('hello')
    return (
        <>
            <GFG />
        </>
    );
}

export default App;

Output:

Reference: https://react-spring.dev/common/props#overview