Open In App

React Spring Specific keys Props

Last Updated : 14 Oct, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

In the below code, we will learn how delayed updates props works 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.

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.

Specific Keys Props: It is used to cancel the animation of specific keys, you can pass a single key, an array of keys or a (key: string) => boolean function.

 

Syntax:

useSpring({ 
    cancel: //value
})

Type:

  • Using a single key
cancel: 'x',
  • Using an array of keys
cancel: ['x', 'y'],
  • Using a function
cancel: key => key !== 'x',

Steps to create an application in React Spring:

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.

 

Steps to run the project: 

npm start

Example1: In the below code, we will use the above syntax to demonstrate the use of Specific Keys props. In this example, we have used a cancel function to stop animation.

index.html

HTML




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


GFG.jsx

Javascript




import React from 'react';
import { useSpring, animated } from 'react-spring'
  
function LoopTrue() {
    const styles = useSpring({
        loop: true,
        cancel: key => key !== 'x',
        from: { rotateZ: 0 },
        to: { rotateZ: 180 },
    })
  
    return (
        <animated.div
            style={{
                width: 70,
                height: 100,
                backgroundColor: 'lightgreen',
  
                ...styles,
            }}
        />
    )
}
export default LoopTrue;


App.js

Javascript




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


Output:

 

Example2: In the below code, we will use the above syntax to demonstrate the use of Specific Keys props. In this example, we have removed the specific key.

index.html 

HTML




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


GFG.jsx

Javascript




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: 70,
                height: 100,
                backgroundColor: 'lightgreen',
  
                ...styles,
            }}
        />
    )
}
export default LoopTrue;


App.js

Javascript




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


Output:

 

Reference: https://react-spring.dev/common/props#specific-keys



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads