Skip to content

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

License

Notifications You must be signed in to change notification settings

lessp/bs-react-is-visible

Folders and files

NameName
Last commit message
Last commit date
Oct 3, 2019
May 1, 2019
Oct 4, 2019
Oct 4, 2019
Oct 3, 2019
Oct 4, 2019
Oct 3, 2019
Jul 16, 2019
Oct 3, 2019
Jul 21, 2020
May 1, 2019
Oct 4, 2019
Jul 16, 2019
Jul 21, 2020
Jul 21, 2020

Repository files navigation

React Is Visible for ReasonReact

Actions Status npm version

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]
// ...