https://github.com/kingrayhan/reactjs-visibility
Detect when an element is becoming visible or hidden on the page.
https://github.com/kingrayhan/reactjs-visibility
Last synced: about 1 year ago
JSON representation
Detect when an element is becoming visible or hidden on the page.
- Host: GitHub
- URL: https://github.com/kingrayhan/reactjs-visibility
- Owner: kingRayhan
- License: mit
- Created: 2021-08-08T05:04:49.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-12-23T11:03:23.000Z (over 2 years ago)
- Last Synced: 2024-04-24T23:01:52.342Z (about 2 years ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/reactjs-visibility
- Size: 4.08 MB
- Stars: 26
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Visibility
Detect when an element is becoming visible or hidden on the page.
[](https://github.com/kingRayhan/reactjs-visibility/actions/workflows/gh-pages-publish.yml)
[](https://github.com/kingRayhan/reactjs-visibility/actions/workflows/npm-publish.yml)
[](https://www.npmjs.com/package/reactjs-visibility)
[](https://github.com/kingrayhan/reactjs-visibility/blob/master/LICENSE)
## [See in action](https://kingrayhan.github.io/reactjs-visibility/)
### Installation
```bash
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
```jsx
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 (
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...
);
};
```
### Detech visibility with `useVisibility()` Hook
**Example 1**
```jsx
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 (
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...
);
};
```
**Example 2**
```jsx
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 (
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...
);
};
```
## Options
It's possible to pass the [IntersectionObserver `options` object](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#Parameters) using the `intersection`
### License
MIT license, Copyright (c) KingRayhan. For more information see `LICENSE`.