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);
// 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.
Copyright (c) 2019 Rodrigo Pombo