react-is-visible

1.2.0 • Public • Published

React Is Visible

build status dependencies Status

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/

Edit festive-mendel-2c2qy

Table of Contents

  1. Polyfill
  2. Installation
  3. Usage
  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

Package Sidebar

Install

npm i react-is-visible

Weekly Downloads

3,929

Version

1.2.0

License

MIT

Unpacked Size

40.1 kB

Total Files

19

Last publish

Collaborators

  • lessp