https://github.com/lessp/react-is-visible

A small library for React to know if an element is on screen or not
https://github.com/lessp/react-is-visible

intersection-observer react visibility

Last synced: 6 days ago
JSON representation

A small library for React to know if an element is on screen or not

• Host: GitHub
• URL: https://github.com/lessp/react-is-visible
• Owner: lessp
• License: mit
• Created: 2018-04-18T21:03:42.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-07T13:10:11.000Z (over 1 year ago)
• Last Synced: 2024-10-05T22:31:24.605Z (about 1 month ago)
• Topics: intersection-observer, react, visibility
• Language: JavaScript
• Homepage: https://lessp.github.io/react-is-visible/
• Size: 5.47 MB
• Stars: 28
• Watchers: 2
• Forks: 4
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Is Visible

[![build status](https://img.shields.io/travis/lessp/react-is-visible/master.svg?style=flat-square)](https://travis-ci.org/lessp/react-is-visible)

[![dependencies Status](https://david-dm.org/lessp/react-is-visible/status.svg?style=flat-square)](https://david-dm.org/lessp/react-is-visible)

A small library that lets you know whether a component is visible on screen or not.

Uses the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).

### Live Examples

**Storybook:** [https://lessp.github.io/react-is-visible/](https://lessp.github.io/react-is-visible/index.html)

**Code Sandbox:** [https://2c2qy.csb.app/](https://2c2qy.csb.app/)

[![Edit festive-mendel-2c2qy](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/festive-mendel-2c2qy?fontsize=14&hidenavigation=1&theme=dark)

# Table of Contents

1. [Polyfill](#polyfill)

2. [Installation](#installation)

3. [Usage](#usage)

   - [React Hook](#react-hook)

   - [HOC](#hoc)

   - [Render Prop](#render-prop)

4. [License](#license)

## [Polyfill](#polyfilll)

In order to polyfill, install the [polyfill from W3C](https://github.com/w3c/IntersectionObserver/tree/master/polyfill)

    $ npm install intersection-observer --save

... and import it before importing `'react-is-visible'`

eg.

```jsx

// App.js

import React from 'react'

import ReactDOM from 'react-dom'

import 'intersection-observer'

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

// ...

```

## [Installation](#installation)

    $ npm install react-is-visible --save

or

    $ yarn add react-is-visible

## [Usage](#usage)

### React Is Visible

#### [React Hook](#react-hook)

```jsx

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 
{isVisible && `I'm visible!`}

}

```


#### [HOC](#hoc)

```jsx

import React from 'react'

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

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


export default withIsVisible(SomeComponent)

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

```

or as a decorator

```jsx

import React from 'react'

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

@withIsVisible

class SomeClass extends React.Component {

  render() {

    const { isVisible } = this.props

    return 
{isVisible && `I'm visible!`}

  }

}

```


#### [Render Prop](#render-prop)

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

```jsx

import React from 'react'

import IsVisible from 'react-is-visible'

const App = () => (

  

    {(isVisible) => 
{isVisible ? `I'm visible!` : `I'm not visible!`}
}

  

)

```


## [License](#license)

MIT