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
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
MIT License
Copyright (c) 2019 Rodrigo Pombo