React Spring Imperatives & Refs
Last Updated :
25 Jul, 2024
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
Similar Reads
What are Refs used for in React Native ? Refs can be used to access DOM nodes or React Native components created in the render method.We can use Refs in react native with the help of the useRef hook which returns a ref object. The object has a .current property through which the React native components can be accessed. The returned object
5 min read
React Rebass Props React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know what are Props in React Rebase. The prop is an important component that is required in each development.Props are used for setting design constraints, ensuring easy accessibility to designs.
4 min read
React Native Smart Components In this article, we are going to learn about Smart components in React Native. The smart component is one of the categories of React Components so before diving into the smart components detail. A Component is one of the core building blocks of React and React-Native. The component is a block of cod
3 min read
How to create refs in React JS? React JS, a powerful and declarative JavaScript library for building user interfaces, provides a feature known as "refs" that allows developers to interact with the underlying DOM elements directly. Refs are generally used for the following purposes:Managing focus, text selection, or media playback.
4 min read
ReactJS Props Reference In React, one of the key concepts that make it flexible and powerful is props. Props, short for "properties", are used to pass data from one component to another. They enable React components to be dynamic and reusable, allowing data to flow down the component tree.In this article, we’ll take a clos
2 min read
React Rebass Link Component React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know how to use Link Component in React Rebass. The Link is an important component that is required in each development. So to create a Link component we can import the Rebass Link component.The l
1 min read
React Rebass Container Component React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know how to use Container Component in React rebass. Container is an important component that is required in each development. So to create a Container component we can import the Rebass Container
1 min read
ReactJS Components Complete Reference In ReactJS, components are the building blocks that help you create interactive UIs by dividing your app into smaller, reusable pieces of code. Understanding how components work is essential for efficiently developing React applications. In this article will provide a complete reference to React com
3 min read
React Rebass MDX Component React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know how to use MDX Component in React rebass. MDX Component is an important component that is required in each development.MDX is a markdown-based format that allows you to import and use React c
2 min read
What is significance of refs in ReactJS ? Refs are a function provided by React to access the DOM element and the React element that you might have created on your own. They are used in cases where we want to change the value of a child component, without making use of props and all. They also provide us with good functionality as we can us
3 min read