bs-react-is-visible

    0.2.1 • Public • Published

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

    Install

    npm i bs-react-is-visible

    DownloadsWeekly Downloads

    5

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    7.25 kB

    Total Files

    6

    Last publish

    Collaborators

    • lessp