# react-use-interpolation

> A useState-like hook that smoothly interpolates between states

Latest version **0.1.0** (published 2023-02-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-use-interpolation
pnpm add react-use-interpolation
yarn add react-use-interpolation
bun add react-use-interpolation
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2023-02-06 |
| First published | 2023-02-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 21.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Heaust-ops |
| Maintainers | heaust |

## Links

- npm: https://www.npmjs.com/package/react-use-interpolation
- Repository: https://github.com/Heaust-ops/use-interpolation
- Homepage: https://github.com/Heaust-ops/use-interpolation#readme
- Issues: https://github.com/Heaust-ops/use-interpolation/issues
- npm.io page: https://npm.io/package/react-use-interpolation

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0

## Recent versions

- 0.1.0 (latest) — 2023-02-06
- 0.0.2 — 2023-02-06
- 0.0.1 — 2023-02-06

## README

## use-interpolation

This is a react hook that works with numbers and tensors,
the tensor shape once initialized is fixed,

when you set the value with this hook,
it smoothly interpolates to the next value,

Import the hook first,
```
import { useInterpolation } from "react-use-interpolation";
```

And then use it like so,

```
const initialPosition = [0,0,1];
const duration = 2; // seconds
const [position, setPosition, setDuration] = useInterpolation(initialPosition, duration);
```

Or alternatively,

```
const initialValue = 24;
const duration = 2; // seconds
const [value, setValue, setDuration] = useInterpolation(initialValue, duration);
```

you can also pass in additional arguments for the animation type and fps,
the default animation type is "lerp", but you can also use "ease-in-out"
the default fps is 60,
here's an example of utilizing all arguments,

```
const initialPosition = [0,0,1];
const duration = 2; // seconds
const [position, setPosition, setDuration] = useInterpolation(initialPosition, duration, "ease-in-out", 144);
```

![image](https://user-images.githubusercontent.com/54670936/217069616-3ae4e847-1bae-4204-bd8d-4cc42c5fd139.png)

https://user-images.githubusercontent.com/54670936/217069230-7b889ab9-d4a2-46ce-956d-5a5462d7575e.mp4

---
_Source: https://npm.io/package/react-use-interpolation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._