use-in-viewport

React hook for check if the current element in viewport.

Author

• name: Martik Avagyan
• email: martikavagyan1@gmail.com
• github: m-avagyan

Getting started

Installation

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

Example

1import React, { useRef } from 'react';
2import useInViewport from 'use-in-viewport';
3
4function Example() {
5  const elementRef = useRef(null);
6  const inViewport = useInViewport(elementRef);
7
8  return (
9    <div ref={elementRef}>
10      Element is {inViewport ? 'in viewport' : 'not in viewport'}
11    </div>
12  );
13}
14
15export 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)

1import React, { useRef } from 'react';
2import useInViewport from 'use-in-viewport';
3
4function Example() {
5  const containerRef = useRef(null);
6  const elementRef = useRef(null);
7  const inViewport = useInViewport(elementRef, {
8    root: containerRef,
9    rootMargin: '20px',
10    threshold: 1,
11  });
12
13  return (
14    <div ref={containerRef}>
15      <div ref={elementRef}>
16        Element is {inViewport ? 'in viewport' : 'not in viewport'}
17      </div>
18    </div>
19  );
20}
21
22export default Example;

---

Copyright (c) 2022 Martik Avagyan