https://github.com/tejasq/react-hook-intersection-observer

A simple React hook that works with the Intersection Observer API.
https://github.com/tejasq/react-hook-intersection-observer

hooks intersectionobserver react web

Last synced: about 1 month ago
JSON representation

A simple React hook that works with the Intersection Observer API.

• Host: GitHub
• URL: https://github.com/tejasq/react-hook-intersection-observer
• Owner: TejasQ
• License: mit
• Created: 2018-11-20T08:43:25.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-23T16:54:11.000Z (over 5 years ago)
• Last Synced: 2024-10-04T19:01:19.578Z (about 1 month ago)
• Topics: hooks, intersectionobserver, react, web
• Language: JavaScript
• Homepage: https://codesandbox.io/s/r45lrl8rzm
• Size: 6.84 KB
• Stars: 33
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `useIntersectionObserver`

This simple [React](https://reactjs.org/) [Hook](https://reactjs.org/docs/hooks-intro.html) uses the [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API in order to relay information to your UI about whether a given element is **intersecting** with the viewport.

## Getting Started

Firstly, you'll want to `yarn add react-hook-intersection-observer` into your project.

Then, using this is as simple as:

[![Edit react-hook-intersection-observer](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/r45lrl8rzm)

```jsx

import React, { useRef, useState } from "react";

import { useIntersectionObserver } from "react-hook-intersection-observer";

const App = () => {

  const root = useRef();    // We need a ref to our "root" or our parent,

  const target = useRef();  // We need a ref to our "target" or our child-to-watch,

  // Let's use a bit of state.

  const [isThingIntersecting, setThingIntersecting] = useState(false);

  // Here's our hook! Let's give it some configuration...

  useIntersectionObserver({

    root,

    target,

    // What do we do when it intersects?

    // The signature of this callback is (collectionOfIntersections, observerElement).

    onIntersect: ([{ isIntersecting }]) => setThingIntersecting(isIntersecting)

  });

  return (

    


      
useIntersectionObserver

      


        The thing is currently{" "}


        {!isThingIntersecting && not}{" "}

        

          intersecting

        

        !

      


      


        


          
THE THING

        

      

    

  );

};

```


## Contributing

This project is _totally_ open for contributions. Get started by looking at the list of [open issues](https://github.com/tejasq/react-hook-intersection-observer/issues), or by opening one and we can talk about improvements! Wooo!