react-observe-component v0.1.4

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

Options

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>
    </>
  )
}