Open In App

React Spring Cancel Prop

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to cancel prop works. 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.

Cancel Prop: When cancel is set to true then the loop animation will stop working and if the cancel is set to false the loop will again start.

 

Syntax:

useSpring({ 
    cancel: // value
})

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:

 

Run the project as follows: 

npm start 

Example1: In the below code, we will use the above syntax to demonstrate the use of the cancel prop.

index.html 

index.html




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


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 },
        cancel: false
    })
  
    return (
        <animated.div
            style={{
                width: 80,
                height: 80,
                backgroundColor: 'green',
                borderRadius: 25,
                ...styles,
            }}
        />
    )
}
export default LoopTrue;


App.js




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 use the above syntax to demonstrate the use of the cancel prop. In this example, we have stopped the animation by changing the cancel property to true.

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 Cancel Prop</h2>
        <h3>cancel: true</h3>
  
        <div id="root"></div>
    </center>
</body>
  
</html>


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 },
        cancel: true,
    });
  
    return (
        <animated.div
            style={{
                width: 80,
                height: 80,
                backgroundColor: "green",
                borderRadius: 25,
                ...styles,
            }}
        />
    );
}
export default LoopTrue;


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#cancel-prop



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