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.
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
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 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.
