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

    Dependents (15)

    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