Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fkhadra/react-on-screen
Check if a react component in the viewport
https://github.com/fkhadra/react-on-screen
lazy-loading react screen viewport visibility
Last synced: about 1 month ago
JSON representation
Check if a react component in the viewport
- Host: GitHub
- URL: https://github.com/fkhadra/react-on-screen
- Owner: fkhadra
- License: mit
- Created: 2016-08-11T21:05:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T16:53:59.000Z (almost 2 years ago)
- Last Synced: 2024-10-02T08:34:59.243Z (about 2 months ago)
- Topics: lazy-loading, react, screen, viewport, visibility
- Language: JavaScript
- Homepage: https://fkhadra.github.io/react-on-screen/
- Size: 966 KB
- Stars: 406
- Watchers: 4
- Forks: 50
- Open Issues: 45
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React on screen []() []() []() [](https://coveralls.io/github/fkhadra/react-on-screen?branch=master)
😎 Check if your react component are visible on the screen without pain and with performance in mind 😎!
- [React on screen ![npm]() ![npm]() ![license]() ](#react-on-screen-npm-npm-license-coverage-statushttpscoverallsiogithubfkhadrareact-on-screenbranchmaster)
- [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [Simple](#simple)
- [Using a render props](#using-a-render-props)
- [Track the visibility only once](#track-the-visibility-only-once)
- [Defining offset](#defining-offset)
- [Partial visibility](#partial-visibility)
- [Use the html tag of your choice](#use-the-html-tag-of-your-choice)
- [Api](#api)
- [Contributions](#contributions)
- [License](#license)
## Demo
View the [demo](https://fkhadra.github.io/react-on-screen/demo-react-on-screen.html).
## Installation
```
$ npm install --save react-on-screen
$ yarn add react-on-screen
```
A UMD build is also available :
```html
```
## Usage
### Simple
```javascript
import React from 'react';
import TrackVisibility from 'react-on-screen';
const ComponentToTrack = ({ isVisible }) => {
const style = {
background: isVisible ? 'red' : 'blue'
};
return
Hello;
}
const YourApp = () => {
return (
{/* Some Stuff */}
{/* Some Stuff */}
);
}
```
### Using a render props
You can use a render props is you want to !
```js
const YourApp = () => {
return (
{({ isVisible }) => isVisible && }
);
}
```
### Track the visibility only once
For many cases you may want to track the visibility only once. This can be done simply as follow :
```js
const YourApp = () => {
return (
);
}
```
### Defining offset
Using `offset` props can be usefull if you want to lazy load an image for instance.
```js
const YourApp = () => {
return (
{({ isVisible }) => isVisible ? : }
);
}
```
### Partial visibility
You may want to consider that a component is visible as soon as a part of the component is visible on screen. You can use the `partialVisibility` props for that.
```js
const YourApp = () => {
return (
{({ isVisible }) => }
);
}
```
### Use the html tag of your choice
```js
const YourApp = () => {
return (
{({ isVisible }) => }
);
}
```
## Api
|props |type |default|description|
|----------------|----------------|-------|-----------|
|once |bool |false|If set to true track the visibility only once and remove the event listeners|
|throttleInterval|int |150|Tweak the event listeners. See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)|
|children |React Components| - |Can be one or many react components|
|style |object | - |Style attributes|
|className |string | - |Css classes|
|offset |number | 0 |Allows you to specify how far left or above of the viewport you want to set isVisible to `true`|
|partialVisibility|bool |false|Set isVisible to true on element as soon as any part is in the viewport|
|tag |string|div |Allows specifying html tag of your choice|
## Contributions
Any contributions is welcome !
- Develop: ``` $ yarn start ```
- Lint : ``` $ yarn lint ```
- Test : ``` $ yarn test ```
- Build : ``` $ yarn build // will lint and run test before ```
## License
Licensed under MIT