# react-water-animation-2d

> Wrapper of water-animation-2d for React

Latest version **0.0.11** (published 2022-12-25) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install react-water-animation-2d
pnpm add react-water-animation-2d
yarn add react-water-animation-2d
bun add react-water-animation-2d
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.11 |
| Published | 2022-12-25 |
| First published | 2021-12-20 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 56.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Vladislav Nikolaev |
| Maintainers | vladisnotlove |
| Keywords | react, animation, animation-2d, water-animation, water-animation-2d, canvas |

## Links

- npm: https://www.npmjs.com/package/react-water-animation-2d
- Repository: https://github.com/vladisnotlove/react-water-animation-2d
- Homepage: https://github.com/vladisnotlove/react-water-animation-2d#readme
- Issues: https://github.com/vladisnotlove/react-water-animation-2d/issues
- npm.io page: https://npm.io/package/react-water-animation-2d

## Dependencies (7)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [@types/react](https://npm.io/package/@types/react.md) ^17.0.37
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^17.0.11
- [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^3.0.1
- [water-animation-2d](https://npm.io/package/water-animation-2d.md) ^0.3.2
- [use-resize-observer](https://npm.io/package/use-resize-observer.md) ^8.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.11 (latest) — 2022-12-25
- 0.0.10 — 2022-12-25
- 0.0.9 — 2022-02-13
- 0.0.8 — 2022-02-13
- 0.0.7 — 2022-02-13
- 0.0.6 — 2022-02-13
- 0.0.5 — 2022-02-11
- 0.0.4 — 2021-12-20
- 0.0.3 — 2021-12-20
- 0.0.2 — 2021-12-20

## README

# react-water-animation-2d

Wrapper of water-animation-2d for React

## Install 

```shell
npm i water-animation-2d
```

## How to use?

For animation you need both "WaterAnimation" and "useWaterAnimationManager"

Example of use:

```jsx
import WaterAnimation, {useWaterAnimationManager} from "react-water-animation-2d";

const Example = () => {
    const {control, waterAnimationManager} = useWaterAnimationManager();
    
    return <div
        style={{
            width: "300px"
        }}
    >
        <WaterAnimation
            control={control}
            fullWidth
        />
        <br />
        <button
            onClick={() => {
                // apply force to the middle of water line downward for 200 ms
                waterAnimationManager.applyForce(
                    150, // position of force (in px)
                    {x: 0, y: 1000}, // force
                    200 // duration of force (in ms)
                )
            }}
        >
            Trigger animation
        </button>
    </div>
}
```

## Author

Vladislav Nikolaev, *react frontend developer*

vladisnotlove@gmail.com<br/>
<a href="https://t.me/vladisnotlove">telegram</a> |
<a href="https://gitlab.com/vladisnotlove">gitlab</a> |
<a href="https://github.com/vladisnotlove">github</a>

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