1.2.0 • Published 2 years ago
react-is-visible v1.2.0
React Is Visible
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/
Table of Contents
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
1.2.0
2 years ago
1.2.0-0
2 years ago
1.1.2
3 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.6
4 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago
0.0.7
6 years ago
0.0.6
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.3
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago