https://github.com/m-avagyan/use-in-viewport

React hook for check if the current element in viewport.
https://github.com/m-avagyan/use-in-viewport

hook in-viewport observer package react

Last synced: 8 days ago
JSON representation

React hook for check if the current element in viewport.

• Host: GitHub
• URL: https://github.com/m-avagyan/use-in-viewport
• Owner: m-avagyan
• License: mit
• Created: 2022-10-03T18:20:50.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2022-10-03T18:53:54.000Z (about 2 years ago)
• Last Synced: 2023-08-24T09:48:26.863Z (about 1 year ago)
• Topics: hook, in-viewport, observer, package, react
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/use-in-viewport
• Size: 10.7 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## use-in-viewport

**React hook for check if the current element in viewport.**

**Author**

- name: _Martik Avagyan_

- email: __

- github: _[m-avagyan](https://github.com/m-avagyan)_

## Getting started

**Installation**

`npm install use-in-viewport` or `yarn add use-in-viewport`

**Example**

```javascript

import React, { useRef } from 'react';

import useInViewport from 'use-in-viewport';

function Example() {

  const elementRef = useRef(null);

  const inViewport = useInViewport(elementRef);

  return (

    


      Element is {inViewport ? 'in viewport' : 'not in viewport'}

    

  );

}


export default Example;

```

**Options**

- `root`: element scroll area (by default `document.body`)

- `rootMargin`: element margin from root (by default `0px`)

- `threshold`: element visibility threshold (by default `0`)

```javascript

import React, { useRef } from 'react';

import useInViewport from 'use-in-viewport';

function Example() {

  const containerRef = useRef(null);

  const elementRef = useRef(null);

  const inViewport = useInViewport(elementRef, {

    root: containerRef,

    rootMargin: '20px',

    threshold: 1,

  });

  return (

    


      


        Element is {inViewport ? 'in viewport' : 'not in viewport'}

      

    

  );

}


export default Example;

```

---

**Copyright (c) 2022 [Martik Avagyan](https://github.com/m-avagyan)**