@react-spring/shared

What is @react-spring/shared?

@react-spring/shared is a utility package that provides shared functionalities for the react-spring animation library. It includes various utilities and helpers that are used internally by react-spring to manage animations, handle interpolation, and manage state.

What are @react-spring/shared's main functionalities?

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

Other packages similar to @react-spring/shared

framer-motion

Framer Motion is a popular animation library for React that provides a simple API for creating animations and gestures. It offers more high-level components and hooks compared to @react-spring/shared, making it easier to create complex animations with less code.

react-motion

React Motion is another animation library for React that focuses on physics-based animations. It provides a different approach to animations compared to @react-spring/shared, using spring configurations to create more natural and fluid animations.

animejs

Anime.js is a lightweight JavaScript animation library that works with any JavaScript framework, including React. It offers a wide range of animation capabilities, including CSS properties, SVG, DOM attributes, and JavaScript objects. Unlike @react-spring/shared, it is not specifically designed for React but can be integrated with it.

README

@react-spring/shared

This package contains modules which are not imported by the main module.

• @react-spring/shared/colorMatchers Regular expressions for color strings

• @react-spring/shared/colors The dictionary of named colors and their numeric values

• @react-spring/shared/normalizeColor Converts named colors, hexadecimal colors, rgba strings, and hsla strings into their numeric values

• @react-spring/shared/stringInterpolation Exports the createStringInterpolator function (with color support)

Main module

Import @react-spring/shared to access these named imports:

• Globals object (updated with its assign method)
• createInterpolator function
• is functions (for runtime type checks)
• Utility hooks (like useForceUpdate)
• Every type in src/types