React Spring Loop Object - Coding

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.

Loop Object: It is used to animate any object in a loop that will repeat.

Syntax:

useSpring({ 
    loop: true
})

Steps to create a React Spring 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: It will look like the following.

Example1: In the below code, we will use the above syntax to demonstrate the loop object using React Spring.

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<title>React App</title> 
  
<body> 
    <center> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <h3>A computer science portal for geeks</h3> 
        <h2>React Spring Loop Object</h2> 
  
        <div id="root"></div> 
    </center> 
</body> 
  
</html>

GFG.jsx

import React from "react"; 
import { useSpring, animated } from "react-spring"; 
  
const LoopingObject = () => { 
  
    const styles = useSpring({ 
        loop: true, 
        from: { rotateZ: 0 }, 
        to: { rotateZ: 180 }, 
        duration: 2000, 
    }); 
  
  
    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", 
                ...styles, 
            }} 
        > 
            GFG 
        </animated.div> 
    ); 
}; 
  
export default LoopingObject; 

App.js

import React from 'react'
import GFG from './GFG'
  
function App() { 
    console.log('hello') 
    return ( 
        <> 
            <GFG /> 
        </> 
    ); 
} 
  
export default App; 

To run the Application: Run the following command:

npm start

Output:

Example2: In the below code, we will use the above syntax to demonstrate the loop object using React Spring. In this example, we are rotating the object by 360 degrees.

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<title>React App</title> 
  
 <body> 
  
    <center> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <h3>A computer science portal for geeks</h3> 
        <h2>React Spring Loop Object</h2> 
  
        <div id="root"></div> 
    </center> 
</body> 
  
</html>

GFG.jsx

import React from "react"; 
import { useSpring, animated } from "react-spring"; 
  
const LoopingObject = () => { 
    const styles = useSpring({ 
        loop: true, 
        from: { rotateZ: 0 }, 
        to: { rotateZ: 360 }, 
        duration: 2000, 
    }); 
  
    return ( 
        <animated.div 
            style={{ 
                width: 80, 
                height: 80, 
                backgroundColor: "green", 
                borderRadius: 16, 
                boxShadow: "rgb(0,0,0,0.44) 0px 5px 5px", 
                display: "flex", 
                alignItems: "center", 
                justifyContent: "center", 
                color: "green", 
                ...styles, 
            }} 
        ></animated.div> 
    ); 
}; 
  
export default LoopingObject; 

App.js

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#the-loop-object

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
React MUI Card API
React Spring Cancel Prop
React MUI ButtonBase API
What are Refs used for in React Native ?
React.js Blueprint Panel stack Component

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	11