react-observe-component

Observe

Observe is a React component which makes use of Intersection Observer API to notify through a declarative interface when the children element has been detected by the observer.

Instalation

Install using yarn

yarn add react-observe-component

or using NPM

npm install react-observe-component

Props

Props	Type	Default	Required	Description
isIntersecting	(entry) => void	() => {}	false	Function which it will be executed if children element it is intersected
isNotIntersecting	(entry) => void	() => {}	false	Function which it will be executed if children element it is not longer intersected
as	string	div	false	Says which HTML tag it will be rendered by Observe component
onEndObserving	() => void	() => {}	false	Function which it will be executed as soon as the Observe component has left to observe children element
triggersOnce	Boolean	false	false	Boolean value which indicates if after first isIntersecting execution Observer must no longer observe children element
unobserve	(entry) => boolean	() => false	false	Boolean function that if returns true will make that Observe component left to observe children element
options	Intersection Observer options	{}	false	Intersection Observer options object

Options

Name	Type	Default	Required
root	Element	window	false
rootMargin	string	'0px'	false
threshold	number | number[]	0	false

For more information visit Intersection observer docs

Usage

import React from "react"
import { Observe } from "react-observe-component"
 
function YourComponent() {
  function isIntersecting(entry) {
 
  }
 
  function isNotIntersecting(entry) {
 
  }
 
  function onEndObserving() {
 
  }
 
  const unobserve = (entry) => entry.intersectionRatio > 0.3
 
  return (
    <section>
      <article>1</article>
      <article>2</article>
      <article>3</article>
      <Observe
        as="article"
        className="your-classname"
        isIntersecting={isIntersecting}
        isNotIntersecting={isNotIntersecting}
        unobserve={unobserve}
        onEndObserving={onEndObserving}
      >
        4
      </Observe>
      <article>5</article>
    </section>
  )
}

This component receives every valid props which HTML tag defined in as prop can receive, An example of this is className prop in the above example

useObserve hook

You could use useObserve hook to observe your element without create a new html tag, this hook receives as an object the same options than Observe component

Usage

import React from "react"
import { useObserve } from "react-observe-component"
 
export const YourComponent = () => {
  const [inView, setIsInView] = React.useState(false)
 
  const { elementRef } = useObserve({
    isIntersecting: () => setIsInView(true),
    isNotIntersecting: () => setIsInView(false),
    options: {
      threshold: 0.5
    }
  })
 
  return (
    <>
      <Card>
        1
      </Card>
      <Card>
        2
      </Card>
      <Card>
        3
      </Card>
        <Card blue>
          4
        </Card>
        <Card blue>
          5
        </Card>
      <Card ref={elementRef}>
        {inView ? 'Visible' : 'No visible'}
      </Card>
    </>
  )
}