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

A small library that lets you know whether a component is visible on screen or not.
https://github.com/lessp/bs-react-is-visible

intersection-observer reason-react reasonml visibility

Last synced: 30 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/lessp/bs-react-is-visible
• Owner: lessp
• License: mit
• Created: 2019-04-28T19:54:50.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T20:36:26.000Z (almost 2 years ago)
• Last Synced: 2024-09-16T08:51:44.509Z (about 2 months ago)
• Topics: intersection-observer, reason-react, reasonml, visibility
• Language: Reason
• Size: 1.28 MB
• Stars: 15
• Watchers: 2
• Forks: 1
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Is Visible for ReasonReact

[![Actions Status](https://github.com/lessp/bs-react-is-visible/workflows/Master%20Release/badge.svg)](https://github.com/lessp/bs-react-is-visible/actions)

[![npm version](https://badge.fury.io/js/bs-react-is-visible.svg)](https://badge.fury.io/js/bs-react-is-visible)

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

Uses the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) which you may want to [polyfill](#polyfill).

This is a semi-port of my React-library [react-is-visible](https://github.com/lessp/react-is-visible) for ReasonReact.

### Live Examples

[https://lessp.github.io/bs-react-is-visible/](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

### Basic

```reason

[@react.component]

let make = () => {

  let (isVisible, ref) = ReactIsVisible.useIsVisible();

  


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

  
;

};

```


### With options

```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.](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility)

In order to polyfill, install the [polyfill from W3C](https://github.com/w3c/IntersectionObserver/tree/master/polyfill)

```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]

// ...

```