use-spring
TypeScript icon, indicating that this package has built-in type declarations

0.2.4 • Public • Published

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

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

Package Sidebar

Install

npm i use-spring

Weekly Downloads

144

Version

0.2.4

License

MIT

Unpacked Size

60.8 kB

Total Files

15

Last publish

Collaborators

  • pomber