use-spring

use-spring

Install

npm install use-spring

Use

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { useSpring } from "use-spring";

function App() {
  const [target, setTarget] = useState(0);
  const handleTargetChange = e => setTarget(+e.target.value);
  const [current] = useSpring(target);
  return (
    <div>
      <input type="range" value={target} onChange={handleTargetChange} />
      <br />
      <input type="range" value={current} readOnly />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Demos

• Basic Demo
• Emoji Heads

API

// default values:
const [x, isMoving] = useSpring(target, {
  stiffness: 170,
  damping: 26,
  mass: 1,
  decimals: 2,
  teleport: false,
  from: target,
  initialSpeed: 0
});

You can try different values of stiffness, damping or mass on the Spring Editor.

Related

• react-spring
• react-motion
• framer-motion

MIT License

Copyright (c) 2019 Rodrigo Pombo