React Spring Inherited Props
Last Updated :
10 Nov, 2022
In this article, we will learn about Inherited Props in 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.
Inherited Props: This prop is always merged into a copy of the props object it was defined in.
Syntax:
useSpring({
from: { ... },
to: { ... },
delay: 100,
onRest: () => ...
})
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 variables to demonstrate the inherited props.
Filename: GFG.jsx
JavaScript
import React from 'react';
import { useSpring, animated } from 'react-spring'
function InheritedProps() {
const styles = useSpring({
from: { x: 0 },
config: { duration: 1000 },
loop: {
x: 100,
},
})
return (
<animated.div
style={{
width: 80,
height: 80,
margin: 200,
backgroundColor: 'green',
borderRadius: 16,
...styles,
}}
/>
)
}
export default InheritedProps;
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: Open the terminal and type the following command.
npm start
Output: In the above example you can see the object moved only once and then stop because the prop was never inherited.
Example 2: In the below code, we will make use of the above variables to demonstrate the inherited props.
Filename: GFG.jsx
JavaScript
import React from 'react';
import { useSpring, animated } from 'react-spring'
/* Define the style for the animation
using the useSpring hook */
function InheritedProps() {
const styles = useSpring({
loop: { reverse: true },
from: { x: 0 },
to: { x: 100 },
config: { duration: 1000 },
})
/* Animated div is the extended version of div that
accepts the properties defined above. */
return (
<animated.div
style={{
width: 80,
height: 80,
backgroundColor: 'green',
borderRadius: 16,
...styles,
}}
/>
)
}
export default InheritedProps;
Filename: App.js
JavaScript
import React from 'react'
import GFG from './GFG'
function App() {
console.log('hello')
return (
<>
<GFG />
</>
);
}
export default App;
Filename: index.html
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 Inherited Props</h2>
<div id="root"></div>
</center>
</body>
</html>
Output:
Reference: https://react-spring.dev/common/props#inherited-props
Similar Reads
React Spring Overview of Props In this article, we will learn the overview of props in 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 dea
3 min read
ReactJS Methods as Props In this article, we will learn about props and passing methods as props. We will also discuss how we can use the child components to pass data to parent components using methods as props.What are props?We know that everything in ReactJS is a component and to pass in data to these components, props a
3 min read
ReactJS Props - Set 2 In our previous article ReactJS Props - Set 1 we discussed props, passing and accessing props, passing props from one component to another, etc. In this article, we will continue our discussion on props. So, what if we want to pass some default information using props to our components? React allows
4 min read
ReactJS Props - Set 1 The react props refer to properties in react that are passed down from parent component to child to render the dynamic content.Till now we have worked with components using static data only. In this article, we will learn about react props and how we can pass information to a Component.What are Prop
5 min read
React Suite <Cascader> Props React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we'll learn about React suite Cascader Props. A
5 min read
ReactJS testInstance.props Property React.js library is all about splitting the app into several components. Each Component has its own lifecycle. React provides us some in-built methods that we can override at particular stages in the life-cycle of the component. In this article, we will know how to use testInstance.props property. T
1 min read