# react-viewport-detect

> A React hook to detect if an HTML Element has been display in the viewport. This is easy to use. You just have to provide an react ref. By default it freeze the value when the element has been display. That is nice to triggered one time animation !

Latest version **2.0.2** (published 2023-05-02) · GPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install react-viewport-detect
pnpm add react-viewport-detect
yarn add react-viewport-detect
bun add react-viewport-detect
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2023-05-02 |
| First published | 2023-03-27 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 43.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | alexandre baudry |
| Maintainers | alexandrebdry |
| Keywords | react, react hook, intersection observer, react viewport, react viewport detect, freeze, react animation, trigger animation |

## Links

- npm: https://www.npmjs.com/package/react-viewport-detect
- Repository: https://github.com/Alexandrebdry/react-in-viewport
- Homepage: https://github.com/Alexandrebdry/react-in-viewport#readme
- Issues: https://github.com/Alexandrebdry/react-in-viewport/issues
- npm.io page: https://npm.io/package/react-viewport-detect

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

- 2.0.2 (latest) — 2023-05-02
- 2.0.1 — 2023-04-27
- 2.0.0 — 2023-04-27
- 1.0.3 — 2023-03-27
- 1.0.2 — 2023-03-27
- 1.0.1 — 2023-03-27
- 1.0.0 — 2023-03-27

## README

# React viewport detect
A React hook to detect if an HTML Element has been display in the viewport. 
This is easy to use. You just have to provide an react ref. 
By default it freeze the value when the element has been display. 
That is nice to triggered one time animation !

[![NPM Version](https://badgen.net/npm/v/react-viewport-detect)](https://www.npmjs.com/package/react-mui-snackbar)
![Minified size](https://img.shields.io/bundlephobia/min/react-viewport-detect)
[![GPLv3 License](https://img.shields.io/badge/License-GPL%20v3-yellow.svg)](https://opensource.org/licenses/)

## Demo 

[example page](https://alexandrebdry.vercel.app/react-viewport-detect)

## Usage

### Basic Usage
```jsx
import {useViewportDetection} from "react-viewport-detect";
import {useRef, useEffect} from "react" ;

const App () => {
    
    const ref = useRef() ; 
    const isVisible = useViewportDetection(ref) ;

    useEffect(() => {
        console.log(isVisible) ;
    },[isVisible]) ;
    
    return (
        <div>
            <h1>React visible hook</h1>
            <div ref={ref} >
                <p>
                    Do I am visible ? 
                </p>
            </div>
        </div>
    );
    
};
```

### Advanced 
```jsx
import {useViewportDetection} from "react-viewport-detect";
import {useRef, useEffect} from "react" ;

const App () => {
    
    const ref = useRef() ; 
    const isVisible = useViewportDetection(ref, {freeze: false, threshold: 1}) ;

    useEffect(() => {
        console.log(isVisible) ;
    },[isVisible]) ;
    
    return (
        <div>
            <h1>React visible hook</h1>
            <div ref={ref} >
                <p>
                    Do I am visible ? 
                </p>
            </div>
        </div>
    );
    
};
```

## Function parameters
### useViewportDetection

| Parameter                               | Type  | Description                                                                                       | Default                                                          |
|-----------------------------------------|-------|---------------------------------------------------------------------------------------------------|------------------------------------------------------------------|
| `ref`                                   | React ref | The React ref to detect                                                                           | none                                                             | 
| `{rootMargin, root, threshold, freeze}` | Array | Intersection Observer options + freeze. Freeze is to keep the value when it has been display once | `{rootMargin = 0px,  root = null, threshold = 0, freeze = true}` |

[More about Intersection Observer options](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)  


## Next steps

- TypeScript Support
- Improve the DX 
- Unit Testing

## Contributing

Contributions are always welcome!
You can create a new pull request with changes or create a new issue and I will update this project

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