Open In App

React Spring Imperatives & Refs

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how Imperatives and Refs work. 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.

Imperatives and Refs: Imperatives are a small set of the property and refs are used to return a mutable ref object.

 

Syntax of Imperative API:

api({
    //property
})

 Syntax of Refs:

useSpringRef()

Steps to create React App are:

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 make use of the above syntax to demonstrate the use of the Imperative API.

GFG.jsx

Javascript




import { useSpring, animated } from 'react-spring'
import React, { useEffect } from 'react';
  
function BackwardsCompatability() {
    const [styles, api] = useSpring(() => ({
        from: { x: -50, opacity: 1 },
    }))
  
    useEffect(() => {
        api({
            x: 150,
            opacity: 1,
            loop: { reverse: true },
        })
    })
  
    return (
        <animated.div
            style={{
                width: 80,
                height: 80,
                backgroundColor: 'lightgreen',
                borderRadius: 16,
                boxShadow: 'rgb(0,0,0,0.44) 0px 5px 5px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'green',
                margin: 250,
                ...styles,
            }} >GFG</animated.div>
    )
}
export default BackwardsCompatability;


App.js

Javascript




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


Step to run the application: Run the following command:

npm start

Output:

 

Example2: In the below code, we will make use of the above syntax to demonstrate the use of the Refs.

GFG.jsx

Javascript




import { useSpring, animated } from 'react-spring'
import React, { useEffect } from 'react';
  
function BackwardsCompatability() {
    const [styles, api] = useSpring(() => ({
        from: { x: -50, opacity: 1 },
    }))
  
    useEffect(() => {
        api({
            x: 150,
            opacity: 1,
            loop: true,
        })
    })
  
    return (
        <animated.div
            style={{
                width: 80,
                height: 80,
                backgroundColor: 'lightgreen',
                borderRadius: 16,
                boxShadow: 'rgb(0,0,0,0.44) 0px 5px 5px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'green',
                margin: 250,
                ...styles,
            }} >GFG</animated.div>
    )
}
export default BackwardsCompatability;


App.js

Javascript




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/imperatives-and-refs#imperative-api



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