r-intersection-observer

Custom React intersection observer component

Install

npm install --save r-intersection-observer

Usage

import * as React from 'react'

import Observer from 'r-intersection-observer'

function Example () {
    return (
      <Observer>
        {
          inView => (
             <div>
               Observing Element
             </div>
          )
        }
      </Observer>
    )
 }

 inView returns boolean if element is intersecting or not

Properties

Name	Required	Type	Description	Default Value
rootMargin	false	string	define rootMargin option	0px
threshold	false	number	define threshold option	0
root	false	JSX	define root option	--
callBack	false	function	callback after intersecting	--
onlyCallBack	false	boolean	returns only callBack function	false
onlyOnce	false	boolean	intersecting entry only once	true
className	false	string	define className for Observer	--
style	false	React.CSSProperties	define style object	--

function	arguments
callBack	(isIntersecting: boolean, entry: IntersectionObserverEntry, ref: React.MutableRefObject)

License

MIT © arsengit