React Is Visible

A small library that lets you know whether a component is visible on screen or not.

Uses the IntersectionObserver API.

Live Examples

Storybook:https://lessp.github.io/react-is-visible/

Code Sandbox:https://2c2qy.csb.app/

Table of Contents

1. Polyfill
2. Installation
3. Usage
   • React Hook
   • HOC
   • Render Prop
4. License

Polyfill

In order to polyfill, install the polyfill from W3C

$ npm install intersection-observer --save

... and import it before importing 'react-is-visible'

eg.

// App.jsimportReactfrom'react'importReactDOMfrom'react-dom'import'intersection-observer'import{withIsVisible}from'react-is-visible'// ...

Installation

$ npm install react-is-visible --save

or

$ yarn add react-is-visible

Usage

React Is Visible

React Hook

importReact,{useRef}from'react'import{useIsVisible}from'react-is-visible'constSomeComponent=()=>{constnodeRef=useRef()constisVisible=useIsVisible(nodeRef)/* const isVisible = useIsVisible(nodeRef, { once: true }) */return<h1ref={nodeRef}>{isVisible&&`I'm visible!`}</h1>}

HOC

importReactfrom'react'import{withIsVisible}from'react-is-visible'constSomeComponent=({ isVisible })=><h1>{isVisible&&`I'm visible!`}</h1>exportdefaultwithIsVisible(SomeComponent)/* export default withIsVisible(SomeComponent, { once: true }) */

or as a decorator

importReactfrom'react'import{withIsVisible}from'react-is-visible'
@withIsVisibleclassSomeClassextendsReact.Component{render(){const{ isVisible }=this.propsreturn<h1>{isVisible&&`I'm visible!`}</h1>}}

Render Prop

The once-prop is optional, but if passed, the isVisible-flag will only trigger once.

importReactfrom'react'importIsVisiblefrom'react-is-visible'constApp=()=>(<IsVisibleonce>{(isVisible)=><h1>{isVisible ? `I'm visible!` : `I'm not visible!`}</h1>}</IsVisible>)

License

MIT