r-intersection-observer
v1.1.0
Published
Simple React intersection observer component
Downloads
1
Maintainers
Readme
r-intersection-observer
Custom React intersection observer component
Install
npm install --save r-intersection-observer
Usage
import * as React from 'react'
import Observer from 'r-intersection-observer'
function Example () {
return (
<Observer>
{
inView => (
<div>
Observing Element
</div>
)
}
</Observer>
)
}
inView returns boolean if element is intersecting or not
Properties
|Name| Required | Type | Description | Default Value | |----| -------- | ---- | ------------------- | ---- | |rootMargin| false | string | define rootMargin option| 0px | |threshold| false | number | define threshold option| 0 | |root| false | JSX | define root option | -- | |callBack| false | function | callback after intersecting| -- | |onlyCallBack| false | boolean | returns only callBack function| false | |onlyOnce| false | boolean | intersecting entry only once| true | |className| false | string | define className for Observer| -- | |style| false | React.CSSProperties | define style object | -- |
|function| arguments | | ------ | ---------- | | callBack| (isIntersecting: boolean, entry: IntersectionObserverEntry, ref: React.MutableRefObject)|
License
MIT © arsengit