https://github.com/pomber/use-spring

Hooke's law hook
https://github.com/pomber/use-spring

animation hook hooks motion physics react spring transition

Last synced: about 2 months ago
JSON representation

Hooke's law hook

• Host: GitHub
• URL: https://github.com/pomber/use-spring
• Owner: pomber
• License: mit
• Created: 2019-09-12T20:58:20.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-06-17T15:50:56.000Z (over 3 years ago)
• Last Synced: 2024-04-25T09:43:10.257Z (5 months ago)
• Topics: animation, hook, hooks, motion, physics, react, spring, transition
• Language: TypeScript
• Homepage: https://usespring.pomb.us
• Size: 199 KB
• Stars: 55
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# use-spring

[![](https://badgen.net/bundlephobia/minzip/use-spring)](https://bundlephobia.com/result?p=use-spring) ![](https://badgen.net/david/dep/pomber/use-spring) ![](https://badgen.net/npm/types/use-spring)

Install

```bash

npm install use-spring

```

Use

```jsx

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 (

    


      

      


      

    

  );

}


const rootElement = document.getElementById("root");

ReactDOM.render(, rootElement);

```

## Demos

- [Basic Demo](https://codesandbox.io/s/use-spring-demo-fbbvn)

- [Emoji Heads](https://codesandbox.io/s/use-spring-demo-irfq5?hidenavigation=1)

## API

```js

// 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](https://springs.pomb.us/).

## Related

- [react-spring](https://github.com/react-spring/react-spring)

- [react-motion](https://github.com/chenglou/react-motion)

- [framer-motion](https://www.framer.com/api/motion/)

## MIT License

Copyright (c) 2019 Rodrigo Pombo