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.
The Loop Function is used to control the loop for example if the loop is set to true then the loop will run and if the loop is set to false then the loop will stop.
Syntax:
useSpring({
from: { ... },
to: { ... },
delay: 100,
onRest: () => ...
})
Types of props:
- Loop Prop: It is used to define repeat animation.
- Inherited props: These props will merge into a copy of the props object it was defined in.
- Cancel Prop: This prop is used to cancel the animation.
- Default props: It is used to set the default value of certain props defined in the same update.
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 syntax to demonstrate the use of the loop function.
GFG.jsx
import React from 'react'; import { useSpring, animated } from 'react-spring' /** * Define the style for the animation * using the useSpring hook */function LoopTrue() { const styles = useSpring({ loop: true, from: { rotateZ: 0 }, to: { rotateZ: 180 }, }) /** * 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 LoopTrue; |
App.js
import React from 'react'import LoopingCard from './LoopingCard' function App() { console.log('hello') return ( <> <LoopingCard /> </> ); } export default App; |
index.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;">neveropen</h1> <h3>A computer science portal for neveropen</h3> <h2>React Spring Loop Function</h2> <div id="root"></div> </center> </body> </html> |
Step to run the application: Open the terminal and type the following command.
npm start
Output:
Example2: In the below code, we will see how Loop Function works. The above example has set animation in its axis and in the below example we have set the initial and the final value of the loop.
GFG.jsx
import React from 'react'; import { useSpring, animated } from 'react-spring' /** * Define the style for the animation * using the useSpring hook */function LoopTrue() { const styles = useSpring({ loop: { reverse: true }, from: { x: 0 }, to: { x: 100 }, }) /** * 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 LoopTrue; |
index.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;">neveropen</h1> <h3>A computer science portal for neveropen</h3> <h2>React Spring Loop Function</h2> <div id="root"></div> </center> </body> </html> |
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-function
