React Spring Compatible Props

In this article, we will learn how we can use compatible props using 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.

Compatible Props: It means that the props can be used together at the same time.

A list of Compatible props are:

• cancel: This prop is used to cancel the loop animation.
• config: This prop is used to config the animation.
• immediate: This prop is used to prevent animation.
• onChange: This prop is used to callback animation frame by frame.
• onDelayEnd: This prop is used to callback when a spring or key has finished being delayed.
• onProps: This prop is used to callback when a spring or key’s props have been updated.
• onRest: This prop is used to callback when a spring or key comes to a standstill.
• onStart: This prop is used to callback when a spring or key is about to be animated.
• pause: This prop is used to callback when a spring or key is paused.

Steps to create an app using react 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 make use of the above props to demonstrate the use of the compatible props.

GFG.jsx

Javascript

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

const CompatibleProps = () => {

    /**
    * Define the style for the animation
    * using the useSpring hook
    */
    const styles = useSpring({
        loop: true,
        onStart: false,
        onChange: false,
        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 CompatibleProps;

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 command in the terminal to run the application:

npm start

Output:

Example2: In the below code, we will make use of the above props to demonstrate the use of the compatible props.

GFG.jsx

Javascript

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

const CompatibleProps = () => {

    /**
    * Define the style for the animation
    * using the useSpring hook
    */
    const styles = useSpring({
        loop: true,
        onPause: true,
        onResume: 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 CompatibleProps;

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#imperative-updates