1.1.0 • Published 6 years ago

@mintuz/react-intersect v1.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
6 years ago

React Intersect

A react component which observes when an element becomes in or out of the viewport you provided. Useful for lazy loading and sending tracking events to analytics on scroll.

Internally this makes use of another library I created called Horizon and tracking of elements is done via the Intersection Observer API allowing for performant tracking on the web as it's done off the main thread reducing jank whilst scrolling.

This component makes use of the render props and state reducer patterns

Install

yarn add @mintuz/react-intersect --save

Usage

Config

KeyValueDescriptionDefault
onEntry(entry) => {}Callback which is called when the element is in viewN/A
onExit(entry) => {}Callback which is called when the element is out of viewN/A
triggerOncetrueWill trigger onEntry callback once, useful for lazyLoadingfalse
render(inView) => {return <div></div>}Render prop that returns a single boolean of if in view or not, use to conditionally load an element when in viewN/A
intersectionObserverConfig{ root: null, rootMargin: '35%', threshold: 0 }Options passed to IntersectionObserver API{ root: null rootMargin: '35%', threshold: 0 }
stateReducer(prevState, changes) => {return {inView:false}}Allow for external manipulation of the internal state of react-intersectN/A

Hook API

const ReactIntersectHook = () => {
  const [inView, ref] = useIntersect({
    triggerOnce: false
  });
  return (
    <div ref={ref}>
      {inView ? "I am in view " : "I am not view"}
    </div>
  );
};

Demo

https://codesandbox.io/s/vvm485k697