@react-spring/shared

Interpolation

The interpolate function allows you to map input ranges to output ranges. In this example, the input range [0, 1] is mapped to the output range [10, 20], and the value 0.5 is interpolated to 15.

const { interpolate } = require('@react-spring/shared');

const interpolatedValue = interpolate([0, 1], [10, 20]);
console.log(interpolatedValue(0.5)); // Outputs: 15

Animation Management

The createInterpolator function is used to create custom interpolators for animations. This example demonstrates creating an interpolator that maps the range [0, 1] to [0, 100], and interpolates the value 0.5 to 50.

const { createInterpolator } = require('@react-spring/shared');

const interpolator = createInterpolator({ range: [0, 1], output: [0, 100] });
console.log(interpolator(0.5)); // Outputs: 50

State Management

The useSpring hook is used to manage the state of animations. This example shows how to initialize an animation state with an opacity of 1 and then update it to 0.

const { useSpring } = require('@react-spring/shared');

const [props, set] = useSpring(() => ({ opacity: 1 }));
set({ opacity: 0 });
console.log(props.opacity); // Outputs: 0