React-spring just got Hooked ⚓

By John Adetutu and Paul Henschel

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
The relevant code for the 3d-card demo

The new api will be released in under a new major today (7). There are (almost) no breaking changes. We offer a new export for hooks (react-spring/hooks) which includes all primitives (useSpring, useTrail, useTransition, useKeyframe) and there has been a minor change regarding exports in general as we removed react-spring/dist/.... You can access addons, konva, universal and native directly now. See: http://react-spring.surge.sh/new

My name is John Adetutu, i am based in London, United Kingdom. Currently working at F1000. I built the new hooks api with Paul Henschel.

follow us on Twitter: John, Paul

And on Github: John, Paul