React Visibility - Detect when an element is becoming visible or hidden on the page.

Related tags

reactjs-visibility
Overview

React Visibility

Detect when an element is becoming visible or hidden on the page.

npm bundle size npm bundle size npm downloads GitHub license

Installation

npm install reactjs-visibility

⚠️ This plugin uses the Intersection Observer API that is not supported in every browser (currently supported in Edge, Firefox and Chrome). You need to include a polyfill to make it work on incompatible browsers.

Detech visibility with component

{ const handleChangeVisibility = (visible) => { if (visible) { alert("I am now visible"); } }; const options = { rootMargin: "200px", }; return (

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nam exercitationem sit alias perferendis, odit ex optio iure assumenda! Voluptatum, nulla. Assumenda iusto nesciunt adipisci totam repellat id excepturi minima.

Loadmore...
); }; ">
import React from "react";
import { VisibilityObserver } from "reactjs-visibility";

const App = () => {
  const handleChangeVisibility = (visible) => {
    if (visible) {
      alert("I am now visible");
    }
  };

  const options = {
    rootMargin: "200px",
  };

  return (
    <div>
      <h1 style={{ fontSize: 500 }}>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nam
        exercitationem sit alias perferendis, odit ex optio iure assumenda!
        Voluptatum, nulla. Assumenda iusto nesciunt adipisci totam repellat id
        excepturi minima.
      </h1>

      <VisibilityObserver
        onChangeVisibility={handleChangeVisibility}
        options={options}
      >
        Loadmore...
      </VisibilityObserver>
    </div>
  );
};

Detech visibility with useVisibility() Hook

Example 1

{ const handleChangeVisibility = (visible) => { if (visible) { alert("I am now visible"); } }; const options = {}; const { ref, visible } = useVisibility({ onChangeVisibility: handleChangeVisibility, options, }); console.log(visible); return (

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nam exercitationem sit alias perferendis, odit ex optio iure assumenda! Voluptatum, nulla. Assumenda iusto nesciunt adipisci totam repellat id excepturi minima.

Loadmore...
); }; ">
import React from "react";
import { useVisibility } from "reactjs-visibility";

const App = () => {
  const handleChangeVisibility = (visible) => {
    if (visible) {
      alert("I am now visible");
    }
  };

  const options = {};

  const { ref, visible } = useVisibility({
    onChangeVisibility: handleChangeVisibility,
    options,
  });

  console.log(visible);

  return (
    <div>
      <h1 style={{ fontSize: 50 }}>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nam
        exercitationem sit alias perferendis, odit ex optio iure assumenda!
        Voluptatum, nulla. Assumenda iusto nesciunt adipisci totam repellat id
        excepturi minima.
      </h1>

      <div ref={ref}>Loadmore...</div>
    </div>
  );
};

Example 2

{ const { ref, visible } = useVisibility(); useEffect(() => { if (visible) { alert("I am now visible"); } }, [visible]); return (

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nam exercitationem sit alias perferendis, odit ex optio iure assumenda! Voluptatum, nulla. Assumenda iusto nesciunt adipisci totam repellat id excepturi minima.

Loadmore...
); }; ">
import React from "react";
import { useVisibility } from "reactjs-visibility";

const App = () => {
  const { ref, visible } = useVisibility();

  useEffect(() => {
    if (visible) {
      alert("I am now visible");
    }
  }, [visible]);

  return (
    <div>
      <h1 style={{ fontSize: 50 }}>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nam
        exercitationem sit alias perferendis, odit ex optio iure assumenda!
        Voluptatum, nulla. Assumenda iusto nesciunt adipisci totam repellat id
        excepturi minima.
      </h1>

      <div ref={ref}>Loadmore...</div>
    </div>
  );
};

Options

It's possible to pass the IntersectionObserver options object using the intersection

License

MIT license, Copyright (c) KingRayhan. For more information see LICENSE.

Issues
Owner
Md Raihan
Graphql | Apollo Server | React | Redux | Next.js | Nuxt.js | Gatsby | Express | Mongodb | Laravel | WordPress | Ghost | Jekyll
Md Raihan
HTML to React parser that works on both the server (Node.js) and the client (browser):

HTML to React parser that works on both the server (Node.js) and the client (browser):

Mark 1k Oct 19, 2021
Declarative hotkey and focus area management for React

React HotKeys A declarative library for handling hotkeys and focus areas in React applications. Upgrading from 1.*.* ? See the upgrade notes. Looking

Aleck Greenham 1.9k Oct 3, 2021
CSS media queries for React

react-media react-media is a CSS media query component for React. A <Media> component listens for matches to a CSS media query and renders stuff based

React Training 2.4k Oct 15, 2021
React-Godfather aims to explore an alternative mental model for function components.

React-Godfather "Look ma, no Hooks!" React-Godfather aims to explore an alternative mental model for function components. It adds a thin layer between

John Kapolos 17 Sep 20, 2021
📏 A resizable component for React.

?? A resizable component for React.

bokuweb 1.5k Oct 17, 2021
🌊🐷 Utility for generalized composition of React components

???? Utility for generalized composition of React components

Enki 279 Oct 4, 2021
A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.

React Translate Component Translate is a component for React that utilizes the Counterpart module and the Interpolate component to provide multi-lingu

Martin Andert 325 Apr 14, 2021
A lightweight react library that converts raw HTML to a React DOM structure.

A lightweight react library that converts raw HTML to a React DOM structure.

Arve Knudsen 652 Oct 17, 2021
Utility Components for determining whether elements are in the center of the screen.

@n1ru4l/react-in-center-of-screen Utility Components for determining whether elements are in the center of the screen. Codesandbox Quick Demo: https:/

Laurin Quast 12 May 29, 2021
A QRCode component for use with React.

qrcode.react A React component to generate QR codes. Installation npm install qrcode.react Usage var React = require('react'); var QRCode = require('q

Paul O’Shannessy 2.6k Oct 15, 2021
iOS Today Widget in React Native

React Native Today Widget Experimental library investigating limits of implementation iOS App Extensions using React Native. Sample result from Comple

Matěj Kříž 343 Oct 3, 2021
@custom-elements-manifest/analyzer plugin to ✨ automatically ✨ create react wrappers for your custom elements

cem-plugin-reactify @custom-elements-manifest/analyzer plugin to automatically create React wrappers for your custom elements based on your custom ele

Pascal Schilp 7 Oct 6, 2021
The next generation state management library for React

The next generation state management library for React

Bytedance Inc. 150 Sep 18, 2021
Truncate a long string in the middle, instead of the end.

React Middle Ellipsis Check out the demo. Adding ellipses to the end of long text is cool. But not always! Sometimes the end of the text contains vita

bluepeter 41 Sep 8, 2021
A static site generator powered by Deno + React

A static site generator powered by Deno + React

xcatliu 1.2k Oct 18, 2021
A ReactJS password recovery box component built using the FluentUI library

A ReactJS password recovery box component built using the FluentUI library

Boia Alexandru 2 Sep 20, 2021
React Refresh Token with JWT and Axios Interceptors example

Buid React JWT Refresh Token example with Axios Interceptors - Refresh Token in React.js, Axios silent refresh JWT token example

null 18 Sep 30, 2021
A toy virtual DOM diffing and reconciliation algorithm, with a simple event loop

A toy virtual DOM diffing and reconciliation algorithm, with a simple event loop

Mauro Cano 1 Oct 9, 2021
redis like key-value state management solution for React

jedisdb redis like key-value state management solution for React Reactive. Redux alternative. Simple and powerful global state management system, acce

Hassan 10 Oct 16, 2021