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

      This feature is exclusive to Teams

      Illustration of wombats

      The package file explorer is only available for Teams at the moment.

      We may support exploring this package in the future. Check back soon.

      Install

      npm i bs-react-is-visible

      DownloadsWeekly Downloads

      2

      Version

      0.2.1

      License

      MIT

      Unpacked Size

      7.25 kB

      Total Files

      6

      Last publish

      Collaborators

      • lessp