A first look at react-springs 7’s new hooks API.

I am assuming most readers by now must have heard of the new hooks api unveiled recently by the React team, if not then I suggest reading up on it here.

Intent is scattered

In the past, in order to deal with complex interaction meant jumping through a hoops, mangling code through a series of disconnected lifecycles and render-props. The linear and functional flow often got lost and the intent was scattered. This was especially worrying when dealing with animations and although react-spring did what it could to animation expressive as possible, the natural intent had to be scattered due to the component structure. Here is a simple typical example: https://codesandbox.io/embed/5zwwpzxxpn

Intent is linear

Hooks on the other hand allow us to express linear intent. In the linked example for instance we have input coordinates that are bound to the mouse. These coordinates are used to form a trail. The trail is finally rendered out. Our intent forms a natural chain: items > coordinates > trail > animated view. Here is the same example using hooks: https://codesandbox.io/embed/z3j207w3l

Introducing react-spring 7

React-spring was one of the first libraries to explore hooks, today we are thrilled to announce that all primitives are now available as hooks, not just useSpring . That means you can now form transitions, trails and keyframes without render props and inversion of control.

You can find a full overview here: http://react-spring.surge.sh/hooks

Here are a couple of demos:

The relevant code for the morphing blob demo

The relevant code for the slider demo

The relevant code for the trailing text demo