# reactanimationonscreen

> React Animation On Screen is a custom hook to track if an element is on screen and apply some animation to it.

Latest version **1.2.0** (published 2021-11-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactanimationonscreen
pnpm add reactanimationonscreen
yarn add reactanimationonscreen
bun add reactanimationonscreen
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2021-11-13 |
| First published | 2020-10-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | github.com/lnardon |
| Maintainers | lnardon |
| Keywords | react, css, animation, on screen, transition, lnardon |

## Links

- npm: https://www.npmjs.com/package/reactanimationonscreen
- Repository: github.com/lnardon/ReactAnimationOnScreen
- npm.io page: https://npm.io/package/reactanimationonscreen

## 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

- 1.2.0 (latest) — 2021-11-13
- 1.1.0 — 2021-04-21
- 1.0.0 — 2020-12-30
- 0.9.0 — 2020-11-01
- 0.8.0 — 2020-11-01
- 0.7.0 — 2020-10-30
- 0.6.1 — 2020-10-30
- 0.6.0 — 2020-10-29
- 0.5.0 — 2020-10-28
- 0.4.0 — 2020-10-28
- 0.3.0 — 2020-10-28
- 0.2.0 — 2020-10-28
- 0.1.3 — 2020-10-23
- 0.1.2 — 2020-10-23
- 0.1.1 — 2020-10-23
- … 1 more at https://npm.io/package/reactanimationonscreen/versions

## README

# React Animation On Screen

React Animation On Screen is a custom React hook to check when an element is appearing on the screen and apply some animation to it.

[![NPM](https://img.shields.io/npm/v/reactanimationonscreen.svg)](https://www.npmjs.com/package/reactanimationonscreen) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Installation

```bash
npm install reactanimationonscreen
```

## Usage

Initiate the function inside an useEffect passing an array of classnames you want to apply the animation, an array of css classes with the animations to be applied.

```ts
import useOnScreen from "reactanimationonscreen";

useEffect(() => {
  const sections = useOnScreen(targetClassNames: string[], animationClassNames: string[]);
}, []);
```

## Example

```jsx
import useOnScreen from "reactanimationonscreen";

useEffect(() => {
  const sections = useOnScreen(
    ["subtitle", "paragraph"],
    ["subtitleAnimation", "paragraphAnimation"]
  );
}, []);
```

## Extra Feature 1

By default the animation is applied when the target starts to appear on the bottom of the screen but if you want the animation to be applied later you can pass a third argument to the function call.

The example below only applies the animation when the target is 250px above the bottom of the screen.

```jsx
import useOnScreen from "reactanimationonscreen";

useEffect(() => {
  const sections = useOnScreen(["title"], ["titleAnimation"], 250);
}, []);
```

## Extra Feature 2

By default the animation is applied only the first time the target appears on the viewport, but if you want the animation to be applied everytime the target enters the viewport pass a boolean true value as the fourth argument to the function call.

```jsx
import useOnScreen from "reactanimationonscreen";

useEffect(() => {
  const sections = useOnScreen(["title"], ["titleAnimation"], 250, true);
}, []);
```

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