Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
react-spring
Advanced tools
react-spring is a spring-physics-based animation library for React applications. It allows developers to create fluid and natural animations with ease, leveraging the power of physics to create realistic motion. The library is highly flexible and can be used for a variety of animation needs, from simple transitions to complex interactive animations.
Basic Animations
This feature allows you to create basic animations such as fading in and out. The `useSpring` hook is used to define the animation properties, and the `animated` component is used to apply these properties to a React element.
```jsx
import React from 'react';
import { useSpring, animated } from 'react-spring';
function BasicAnimation() {
const props = useSpring({
to: { opacity: 1 },
from: { opacity: 0 },
});
return <animated.div style={props}>I will fade in</animated.div>;
}
export default BasicAnimation;
```
Keyframe Animations
This feature allows you to create keyframe animations, where an element transitions through multiple states. The `to` property can be an async function that defines a sequence of animations.
```jsx
import React from 'react';
import { useSpring, animated } from 'react-spring';
function KeyframeAnimation() {
const props = useSpring({
from: { transform: 'translate3d(0,0,0)' },
to: async (next) => {
await next({ transform: 'translate3d(100px,0,0)' });
await next({ transform: 'translate3d(0,0,0)' });
},
});
return <animated.div style={props}>I will move</animated.div>;
}
export default KeyframeAnimation;
```
Gesture-based Animations
This feature allows you to create gesture-based animations, such as dragging. The `useDrag` hook from `react-use-gesture` is used in combination with `useSpring` to create a draggable element.
```jsx
import React from 'react';
import { useSpring, animated } from 'react-spring';
import { useDrag } from 'react-use-gesture';
function Draggable() {
const [props, set] = useSpring(() => ({ x: 0, y: 0 }));
const bind = useDrag(({ offset: [x, y] }) => set({ x, y }));
return <animated.div {...bind()} style={{ ...props, width: 100, height: 100, background: 'lightblue' }} />;
}
export default Draggable;
```
Framer Motion is a popular animation library for React that provides a simple API for creating animations and gestures. It is known for its ease of use and powerful features, such as layout animations and shared element transitions. Compared to react-spring, Framer Motion is more focused on providing a high-level API for common animation tasks, while react-spring offers more flexibility and control over the animation physics.
React Transition Group is a low-level animation library for React that provides more control over the transition states of components. It is often used for simple animations like fading, sliding, and collapsing. Compared to react-spring, React Transition Group is more focused on managing the lifecycle of animations and transitions, while react-spring provides more advanced physics-based animations.
React Move is an animation library for React that allows you to create complex animations using a declarative syntax. It is designed to work well with data-driven animations and provides a flexible API for creating custom animations. Compared to react-spring, React Move is more focused on data-driven animations and provides a different approach to defining animations using a declarative syntax.
npm install react-spring
Examples: Interpolation | Native rendering |ย Reveals | List transitions | Staggered | TodoMVC | DragList
React-spring is a wrapper around a cooked down fork of Facebooks animated. It is trying to bridge Chenglou's React-motion and animated, as both have their pros and cons, but definitively could benefit from one another:
So as you see, they're polar opposites and the strengths of one are the weaknesses of another. React-spring inherits React-motions api while you can feed it everything animated can interpolate. It also has support for animateds efficient native rendering.
(Demo)
Like React-motion by default we'll render the receiving component every frame as it gives you more freedom to animate whatever you like. In many situations this will be ok.
import { Spring } from 'react-spring'
const App = ({ toggle }) => (
<Spring
// Default values, optional ...
from={{ opacity: 0 }}
// Will animate to ...
to={{
// Can be numbers, colors, paths, degrees, percentages, ...
start: toggle ? '#abc' : 'rgb(10,20,30)',
end: toggle ? 'seagreen' : 'rgba(0,0,0,0.5)',
stop: toggle ? '0%' : '50%',
scale: toggle ? 1 : 2,
rotate: toggle ? '0deg' : '45deg',
path: toggle
? 'M20,380 L380,380 L380,380 L200,20 L20,380 Z'
: 'M20,20 L20,380 L380,380 L380,20 L20,20 Z',
}}>
{({ color, scale, rotate, path, start, stop, end }) => (
<div style={{ background: `linear-gradient(to bottom, ${start} ${stop}, ${end} 100%)` }}>
<svg style={{ transform: `scale(${scale}) rotate(${rotate})` }}>
<g><path d={path} /></g>
</svg>
</div>
)}
</Spring>
)
Don't like the way render props wrap your code? You can always move out component definitions, like so:
const Header = ({ text, ...styles }) => <h1 style={styles}>{text}</h1>
const App = () => (
<Spring to={{ color: 'red' }} text="extra props are spread over the child" children={Header}/>
)
Et voilร ! Now you render a animated version of the Header
component! It's actually faster as well since the function isn't recreated on every prop-change.
(Demo)
Pass the native
flag for more performance. Your component will render once and all updates will be applied straight to the dom. Just be aware of the following conditions:
animated.[elementName]
, for instance div
becomes animated.div
template
string literalimport { Spring, animated, template } from 'react-spring'
const App = ({ toggle }) => (
<Spring
native
from={{ fill: 'black' }}
to={{
rotate: toggle ? '0deg' : '180deg',
scale: toggle ? 1 : 2,
path: toggle ? TRIANGLE : RECTANGLE,
}}>
{({ rotate, scale, path }) => (
ย ย ย ย ย ย <animated.svg style={{ transform: template`rotate(${rotate}) scale(${scale})` }}>
<g><animated.path d={path} /></g>
</animated.svg>
)}
</Spring>
)
(Demo)
Use SpringTransition
and pass in your keys
. from
denotes base styles, enter
styles are applied when objects appear, leave
styles are applied when objects disappear. Keys and children have to match in their order!
import { SpringTransition } from 'react-spring'
const App = ({ items }) => (
<ul>
<SpringTransition
keys={items.map(item => item.key)}
from={{ opacity: 0, color: 'black', height: 0 }}
enter={{ opacity: 1, color: 'red', height: 18 }}
leave={{ opacity: 0, color: 'blue', height: 0 }}>
{items.map(item => styles => <li style={styles}>{item.text}</li>)}
</SpringTransition>
</ul>
)
}
You can use this prototype for two-state reveals, in that case simply render a single child that you can switch out for another.
const App = ({ toggle }) => (
<SpringTransition
keys={toggle ? 'ComponentA' : 'ComponentB'}
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0 }}>
{toggle ? ComponentA : ComponentB}
</SpringTransition>
)
(Demo)
Create trailing animations by using SpringTrail. The api is similar to SpringTransition though it will assume your list is fixed. The items will drop in in a trailing motion.
import { SpringTrail } from 'react-spring'
const App = ({ items }) => (
<SpringTrail from={{ opacity: 0 }} to={{ opacity: 1 }} keys={items.map(item => item.key)}>
{items.map(item => styles => (
<div style={styles}>
{item.text}
</div>
))}
</SpringTrail>
)
FAQs
Unknown package
The npm package react-spring receives a total of 625,119 weekly downloads. As such, react-spring popularity was classified as popular.
We found that react-spring demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.ย It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.