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.js
import React from 'react'
import ReactDOM from '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

import React, { useRef } from 'react'
import { useIsVisible } from 'react-is-visible'

const SomeComponent = () => {
  const nodeRef = useRef()
  const isVisible = useIsVisible(nodeRef)
  /* const isVisible = useIsVisible(nodeRef, { once: true }) */

  return <h1 ref={nodeRef}>{isVisible && `I'm visible!`}</h1>
}

HOC

import React from 'react'
import { withIsVisible } from 'react-is-visible'

const SomeComponent = ({ isVisible }) => <h1>{isVisible && `I'm visible!`}</h1>

export default withIsVisible(SomeComponent)
/* export default withIsVisible(SomeComponent, { once: true }) */

or as a decorator

import React from 'react'
import { withIsVisible } from 'react-is-visible'

@withIsVisible
class SomeClass extends React.Component {
  render() {
    const { isVisible } = this.props

    return <h1>{isVisible && `I'm visible!`}</h1>
  }
}

Render Prop

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

import React from 'react'
import IsVisible from 'react-is-visible'

const App = () => (
  <IsVisible once>
    {(isVisible) => <h1>{isVisible ? `I'm visible!` : `I'm not visible!`}</h1>}
  </IsVisible>
)

License

MIT