Open In App

React Spring default Object

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how default objects work 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.

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

Default Object: This is used to set the default value of the props. you can also pass an object instead of using default: true

 

Steps to create a React App:

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:

 

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

npm start

Example1: In the below code, we will make use of the default object to set the default properties.

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,
        default: { immediate: 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:

 

Example2:  In the below code, we will make use of the default object to set the default properties.

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,
        default: { immediate: 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;


Output:

 

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



Last Updated : 14 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads