with-intersection-observer-props

👀 with-intersection-observer-props

Part of a collection of Higher-Order Components for React, especially useful with Recompose.

Dynamically map visibility of a component to boolean props using Intersection Observer API (Can I use?).

Install

yarn add @hocs/with-intersection-observer-props

Usage

withIntersectionObserverProps(
  intersectionMatchers: {
    [propName: string]: number
  },
  options?: Object,
  onRefName?: string
): HigherOrderComponent

Where:

• intersection matcher's value is a single threshold
• options – object with root and rootMargin.
• onRefName – in some cases you might want to change it. 'onRef' by default.

Basic wrapper to make Target component hidden behind scroll by default:

import React from 'react';

import Target from './Target';

const Demo = () => (
  <div style={{ height: '300px', overflow: 'scroll', fontSize: 32, border: '1px solid black' }}>
    <div style={{ height: '300px' }}>Scroll me down</div>
    <Target style={{ backgroundColor: 'RebeccaPurple', color: 'white' }}/>
    <div style={{ height: '300px' }}/>
  </div>
);

export default Demo;

Target component which is using Intersection Observer:

import React from 'react';
import 'intersection-observer';
import withIntersectionObserverProps from '@hocs/with-intersection-observer-props';

const Target = ({ isOnePixelVisible, isHalfVisible, isFullVisible, onRef }) => (
  <div ref={onRef} style={{ backgroundColor: 'RebeccaPurple', color: 'white' }}>
    <p>{JSON.stringify({ isOnePixelVisible })}</p>
    <p>{JSON.stringify({ isHalfVisible })}</p>
    <p>{JSON.stringify({ isFullVisible })}</p>
  </div>
);

export default withIntersectionObserverProps({
  isOnePixelVisible: 0.0,
  isHalfVisible: 0.5,
  isFullVisible: 1.0
})(Target);

📺 Check out live demo.

Notes

• You might still need a polyfill.
• It's impossible to avoid first render with undefined intersection props.
• Target Component will be just passed through on unsupported platforms (i.e. global.IntersectionObserver is not a function) like JSDOM (so Jest as well) or with Server-Side Rendering. This means that there will be no boolean props (i.e. undefined) which might be expected, but you can take care of it using Recompose defaultProps HOC if it's really necessary.

Related

• ↔️ with-resize-observer-props
• ↔️ with-match-media-props