react-is-visible

    1.1.2 • 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

      This feature is exclusive to Teams

      Illustration of wombats

      The package file explorer is only available for Teams at the moment.

      We may support exploring this package in the future. Check back soon.

      Install

      npm i react-is-visible

      DownloadsWeekly Downloads

      3,511

      Version

      1.1.2

      License

      MIT

      Unpacked Size

      40.1 kB

      Total Files

      19

      Last publish

      Collaborators

      • lessp