Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-is-visible

1.1.1 • 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://13wozo64wq.codesandbox.io/

Edit 13wozo64wq

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

Install

npm i react-is-visible

DownloadsWeekly Downloads

2,081

Version

1.1.1

License

MIT

Unpacked Size

37 kB

Total Files

19

Last publish

Collaborators

  • avatar