React Spring Loop Function
Last Updated :
11 Oct, 2022
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'
function LoopTrue() {
const styles = useSpring({
loop: true ,
from: { rotateZ: 0 },
to: { rotateZ: 180 },
})
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;" >GeeksforGeeks</ h1 >
< h3 >A computer science portal for geeks</ 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'
function LoopTrue() {
const styles = useSpring({
loop: { reverse: true },
from: { x: 0 },
to: { x: 100 },
})
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;" >GeeksforGeeks</ h1 >
< h3 >A computer science portal for geeks</ 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
Share your thoughts in the comments
Please Login to comment...