mirror of
https://github.com/streamich/react-use.git
synced 2025-12-08 18:02:14 +00:00
42 lines
740 B
Markdown
42 lines
740 B
Markdown
# `useSpring`
|
|
|
|
React animation hook that updates a single numeric value over time according
|
|
to spring dynamics.
|
|
|
|
## Usage
|
|
|
|
```jsx
|
|
import {useSpring} from 'react-use';
|
|
|
|
const Demo = () => {
|
|
const [target, setTarget] = useState(50);
|
|
const value = useSpring(target);
|
|
|
|
return (
|
|
<div>
|
|
{value}
|
|
<br />
|
|
<button onClick={() => setTarget(0)}>Set 0</button>
|
|
<button onClick={() => setTarget(100)}>Set 100</button>
|
|
</div>
|
|
);
|
|
};
|
|
```
|
|
|
|
## Requirements
|
|
|
|
Install [`rebound`](https://github.com/facebook/rebound-js) peer dependency:
|
|
|
|
```bash
|
|
npm add rebound
|
|
# or
|
|
yarn add rebound
|
|
```
|
|
|
|
## Reference
|
|
|
|
```js
|
|
const currentValue = useSpring(targetValue);
|
|
const currentValue = useSpring(targetValue, tension, friction);
|
|
```
|