React Spring Inherited Props

Last Updated : 10 Nov, 2022

In this article, we will learn about Inherited 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.

Inherited Props: This prop is always merged into a copy of the props object it was defined in.

Syntax:

useSpring({
    from: { ... },
    to: { ... },
    delay: 100,
    onRest: () => ... 
})

Steps to create a React Application:

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:

Example 1: In the below code, we will make use of the above variables to demonstrate the inherited props.

Filename: GFG.jsx

JavaScript

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

function InheritedProps() {
    const styles = useSpring({
        from: { x: 0 },
        config: { duration: 1000 },
        loop: {
            x: 100,
        },
    })

    return (
        <animated.div
            style={{
                width: 80,
                height: 80,
                margin: 200,
                backgroundColor: 'green',
                borderRadius: 16,
                ...styles,
            }}
        />
    )
}

export default InheritedProps;

App.js

JavaScript

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

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

export default App;

Step to run the application: Open the terminal and type the following command.

npm start

Output: In the above example you can see the object moved only once and then stop because the prop was never inherited.

Example 2: In the below code, we will make use of the above variables to demonstrate the inherited props.

Filename: GFG.jsx

JavaScript

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

/* Define the style for the animation
using the useSpring hook */
function InheritedProps() {
    const styles = useSpring({
        loop: { reverse: true },
        from: { x: 0 },
        to: { x: 100 },
        config: { duration: 1000 },
    })

    /* Animated div is the extended version of div that
    accepts the properties defined above. */
    return (
        <animated.div
            style={{
                width: 80,
                height: 80,
                backgroundColor: 'green',
                borderRadius: 16,
                ...styles,
            }}
        />
    )
}

export default InheritedProps;

Filename: App.js

JavaScript

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

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

export default App;

Filename: index.html

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" 
        content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" 
        content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
</head>

<body>
    <noscript>
        You need to enable JavaScript to run this app.
      </noscript>
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
        <h2>React Spring Inherited Props</h2>

        <div id="root"></div>
    </center>
</body>

</html>