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.

Live Examples

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

Installation

npm install bs-react-is-visible

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

Usage

Basic

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

  <h1 ref>
    {(isVisible ? "I'm visible!" : "I'm not visible") |> React.string}
  </h1>;
};

With options

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

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

Polyfill

Browser compatibility.

In order to polyfill, install the polyfill from W3C

npm install intersection-observer --save

... and import it somewhere before using ReactIsVisible

The easiest way would be by doing something like:

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

[@react.component]
// ...