React Is Visible for ReasonReact


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

Uses the IntersectionObserver API which you may want to polyfill.

This is a semi-port of my React-library react-is-visible for ReasonReact.

$3

https://lessp.github.io/bs-react-is-visible/

Installation

``bash
npm install bs-react-is-visible
`

Add bs-react-is-visible to bs-dependencies in bsconfig.json

Usage

$3

`reason
[@react.component]
let make = () => {
let (isVisible, ref) = ReactIsVisible.useIsVisible();


{(isVisible ? "I'm visible!" : "I'm not visible") |> React.string}


;
};
`

$3

`reason
[@react.component]
let make = () => {
let (isVisible, ref) = ReactIsVisible.useIsVisible(~options={once: true}, ());


{(isVisible ? "I'm triggered as visible once!" : "I'm not visible") |> React.string}


;
};
`

Polyfill

Browser compatibility.

In order to polyfill, install the polyfill from W3C

`bash
npm install intersection-observer --save
`

... and import it somewhere before using ReactIsVisible

The easiest way would be by doing something like:

`reason
// App.re
[%bs.raw {| require("intersection-observer") |}];

[@react.component]
// ...
``