How does it work?

One of the nice features of the web version of react-interactable is that we can create online demos with it in a simple code-sandbox:

Go and drag that square!

<Interactable.View>

<div style={ redSquare } />

</Interactable.View>

This is the simplest example: We have a red square that is “interactable”. It means that we can drag it and move it around, but be careful when releasing the mouse click (or your finger from the screen) because the square will continue moving in the direction we were dragging it and with the same velocity. That’s because interactable components have inertia.

Throwing the square away and try to pick it with our cursor on the fly again is fun! Although if we are not lucky to catch it, the square will move forever getting closer and closer to the infinite but never reaching it… That’s because there is no other force than the one the user made with the gesture, so nothing stops the square or make it go slower.

Let’s add some forces to the mix to create something interesting.

May the force be with you

Moving a component forever with the same speed is probably the simplest physics we can add to our UI and it’s not very useful. In our world, nothing moves permanently and that’s because there are forces that prevent infinite continuous movement. Since react-interactable aims to animate our components in a natural way, it allows defining forces that affect their inertia.

We have 3 kinds of forces available:

Friction areas : They show resistance to the movement, if we are dragging our component through this kind of areas we will see that it doesn’t follow immediately our drag movement. If we are not dragging the component but it had some inertia, the area will slow it down until eventually stop it completely.

: They show resistance to the movement, if we are dragging our component through this kind of areas we will see that it doesn’t follow immediately our drag movement. If we are not dragging the component but it had some inertia, the area will slow it down until eventually stop it completely. Springs : When the movement is affected by a spring force it behaves like if it was tied to a spring. We need to define the point where the other tip of the spring is attached, the spring center, so if we drag the component away from that point and release, it will return to the center at a speed that depends on the distance and the tension of the spring, bouncing more or less when reaching the center depending the damping we may configure.

: When the movement is affected by a spring force it behaves like if it was tied to a spring. We need to define the point where the other tip of the spring is attached, the spring center, so if we drag the component away from that point and release, it will return to the center at a speed that depends on the distance and the tension of the spring, bouncing more or less when reaching the center depending the damping we may configure. Gravity wells: Gravity forces make objects to be attracted by each other. The attraction gets stronger the closer we get to the center of the gravity well, so our components will accelerate in their inertia movement in the direction of the center. If we are dragging a component near a gravity well we will see that the component will leave the warmth of our cursor (or finger) and fall into the cold center of the gravity claws.

When we define these forces using the props we can also determine the influence area of any of them (relative to the center of the component) so we can apply resistance to some movement direction, or make the component get trapped by an area of the UI when dragging it nearby.

The following example shows a friction area in blue where the movement of the square is not as free as it was before. Try to drag and release the square inside the blue area, it got stopped quickly. I dare you to throw it into the blue area with enough speed to make it escape from the other side!

The blue zone is a friction area.

Boundaries and snap points

The forces we have just introduced make the animations feel natural, behaving like situations that we can see in the real world, but it’s not usual that we use them as they are in our UIs. We usually want to drag elements to open or collapse sections and forbid the movement in some directions. How to do that is not obvious just by applying forces.

In order to make our UIs development simpler, react-interactable allow us to define points where the components will end up when we stop dragging so we don’t lose them in the infinite: they are called snap points.

We pass those points using the snapPoints prop and they are disabled while we are dragging the component. When we release the drag, react-interactable calculates what’s the point that should receive the component based on the position and the inertia of the movement and activates it using a spring force. This way we can define states for a component depending on the snap point that it’s stuck to.

In the following example, we can see that we have defined 2 snap points and we can move our component between them getting a natural animation. The movement is restricted to the x-axis using the horizontalOnly prop.

It feels really nice to throw the square from one point to another because the spring force handles the inertia of the square gently to attract it to the snap point.

We don’t need to drag the square completely from one point to another, we don’t even need to take it to the middle point: a quick swipe gesture can launch the square to make it arrive at its destination.

There is another way of limiting the movement: using boundaries. Boundaries will forbid the movement in certain areas, and we can decide if we want the component to bounce when reaching those areas. That bounce animation will depend on the speed of the element when touching the boundary.

Extrapolate animations using interpolations

I not a big fan of words that sound complex like “interpolation”, but I have to admit that interpolations are one of the things I like the most from react-native. They are provided by the Animated API and we are lucky enough that we can use the same API in react-native-web and react-dom thanks to the JS implementation.

An interpolation is just a calculation of a value based in the relationship it has with another value. An interpolation definition using the Animated API is like:

let input = new Animated.Value(0)

let output = value.interpolate({

inputRange: [0, 10],

outputRange: [0, 100]

});

With that definition in place:

When input ‘s value is 0, the value of output is 0 .

‘s value is the value of is . When input changes to 10 the output will become 100 .

But what happens when input is 5 ? The output value gets interpolated to be 50 because the interpolation is linear. 50 is the middle point between 0 and 100 like 5 is the middle point between 0 and 10 . (Not the best explanation, but I hope you get the point!)

This way of relating one value to another is so useful. For animating components automatically when others are being animated, we just need to interpolate their styles.

Interactable accepts the props animatedValueX and animatedValueY that will store the position of the component, if we interpolate values from them and pass those values to other component styles, they will be transformed when the interactable element is on the move.

In the following example, we can open the left panel by dragging, the rest of the components will react to the animation:

Drag the left panel into the center

The left panel is the interactable one. From its position, we interpolate 8 values that animate 8 different style properties in external elements when we dragging it. We have defined those animations in a declarative way that makes our transitions really easy to write, read and maintain. Interpolations are just fun!

And what else?

I can’t stop saying how much I like the API. It comes with more goodies like events when we drag and stop dragging, when the interactable element lands into a snap point or enter a certain area. Also with imperative methods to move our Interactables programmatically.

To summarize, react-interactable is for us if we…

…want to reuse the same interactions from our react-native project in the web using react-native-web. By adding the react-interactable alias to our webpack configuration, our app will work for the web the same way it works for mobile using react-native-interactable .

alias to our webpack configuration, our app will work for the web the same way it works for mobile using . …don’t want to eject our Expo’s react-native app. Sometimes is just too good to develop using Expo, so we can delay the ejection as long as possible and use react-interactable in the meanwhile.

in the meanwhile. …develop a react app that is mainly focused to be used in mobile browsers or as a PWA. They can feel more “nativey” with react-interactable .

I’ll try to visit more features of the library in future articles including examples taken from real apps. If you don’t want to wait, you can already install the library in your project and discover all the good by yourself. I’d be glad to hear from you if you do it :)