reactify-observe

4KB (gzipped) React Component equivalent implementation of IntersectionObserver.observe()

Install the package :

npm install reactify-observe --save

Import the component (including IntersectionObserver polyfill) :

import ObserverElement from 'reactify-observe';

Import just the component (without IntersectionObserver polyfill) :

import ObserverElement from 'reactify-observe/ObserverComponent';

Usage :

1. <ObserverElement {...props} /> // In this case it observe itself
 
2. <ObserverElement {...props}>
        {component} // Component which you want to observe 
   </ObserverElement>

Component Properties :

It contains set of options instructing component when to start observing, notify once it comes to viewport etc. Properties are define like this :

type        |        mandatory        |        defaultValue

props.children :

any       |       optional

Component you want to observe. If its not defined it will observe itself.

<ObserverComponent>
    {html_or_custom_component_to_observe}
</ObserverComponent>

props.className :

String        |        optional        |        ''

Custom class name you want to assign to wrapper container

<ObserverComponent className="<your_custom_class>" />

props.onShow :

Function        |        optional

Callback function which gets called when its gets shown to viewport (depends on the visiblePercentage defined).

function onElementShown(entry) { // This function will get call once element gets shown
    < your_custom_logic >
}
 
<ObserverComponent onShow={onElementShown} />

Argument passed to onShow callback function is of type IntersectionObserverElement.

props.onStartObserving :

Function        |        optional

Callback function which gets called before it start observing element.

function onStartObserving(container) { // This function will get call once element gets shown
    < your_custom_logic >
}
 
<ObserverComponent onStartObserving={onStartObserving} />

Argument passed to onStartObserving callback function is of type HTMLDivElement (basically container dom reference).

props.onStopObserving :

Function        |        optional

Callback function which gets called before it stop observing element.

function onStopObserving(container) { // This function will get call once element gets shown
    < your_custom_logic >
}
 
<ObserverComponent onStopObserving={onStopObserving} />

Argument passed to onStopObserving callback function is of type HTMLDivElement (basically container dom reference).

props.once :

Boolean        |        optional        |        false

If set to true, once element comes to viewport it will stop observing it.

<ObserverComponent once />

props.visiblePercentage :

number or number[]        |        optional        |        1

Similar to threshold option of IntesectionObserver.

<ObserverComponent visiblePercentage={0.5} />
 
<ObserverComponent visiblePercentage={[0, 0.5, 1]} />

props.offset :

String        |        optional        |        { top: 0, left: 0, right: 0, bottom: 0 }

Similar to rootMargin option of IntesectionObserver

<ObserverComponent offset={{
    top: 10,
    bottom: 0,
    left: 0,
    right: 0
}}/>

props.setRootContainer :

Function        |        optional

Return Value :        DOMElement or undefined

Used to specify the root container, with respect to which component will be observed. If the function does not return anything or its not specified, it by default takes viewport.

function setRootContainerFn () {
    return < some_other_dom_container_ref >;
}
 
<ObserverComponent setRootContainer={setRootContainerFn} />

License

MIT