fkhadra / React On Screen
Licence: mit
Check if a react component in the viewport
Stars: ✭ 357
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React On Screen
React Intersection Observer
React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
Stars: ✭ 2,689 (+653.22%)
Mutual labels: lazy-loading, viewport
React Cool Inview
😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).
Stars: ✭ 830 (+132.49%)
Mutual labels: lazy-loading, viewport
Ng In Viewport
Allows us to check if an element is within the browsers visual viewport
Stars: ✭ 178 (-50.14%)
Mutual labels: lazy-loading, viewport
Viewprt
A tiny, dependency-free, high performance viewport position & intersection observation tool
Stars: ✭ 36 (-89.92%)
Mutual labels: lazy-loading, viewport
svelte-intersection-observer
Detect if an element is in the viewport using the Intersection Observer API
Stars: ✭ 151 (-57.7%)
Mutual labels: viewport, lazy-loading
viewport-spy
Godot editor UI to spy on what a Viewport is rendering. Useful for debugging.
Stars: ✭ 28 (-92.16%)
Mutual labels: viewport
Stickystack.js
A jQuery plugin that creates a stacking effect by sticking panels as they reach the top of the viewport.
Stars: ✭ 287 (-19.61%)
Mutual labels: viewport
SimpleScreens
Simple Screens is a library of screens and screen components (forms, sections, transitions) to be included, extended, or generally reused in applications based on Moqui Framework and Mantle Business Artifacts.
Stars: ✭ 20 (-94.4%)
Mutual labels: screen
Giraffeplayer2
out of the box android video player(support lazy load, ListView/RecyclerView and hight performance)
Stars: ✭ 344 (-3.64%)
Mutual labels: lazy-loading
Vue Lazy Image Loading
Vue lazy image and background loading plugin.
Stars: ✭ 335 (-6.16%)
Mutual labels: lazy-loading
Accessible Image Lazy Load
😴 gandul! accessible lazy loading images
Stars: ✭ 281 (-21.29%)
Mutual labels: lazy-loading
angular-seo
Angular 13 Example SEO Search engine optimization + PWA + SSR + Lazyloading
Stars: ✭ 58 (-83.75%)
Mutual labels: lazy-loading
Screenmanager
Flexible way to manage screens with transitions for Unity
Stars: ✭ 300 (-15.97%)
Mutual labels: screen
Animate
A tiny JS (5KB) library to trigger animations on elements when they are within the viewport 👓
Stars: ✭ 340 (-4.76%)
Mutual labels: viewport
MMM-MagicMover
MagicMirror² module to avoid screen burn-in
Stars: ✭ 21 (-94.12%)
Mutual labels: screen
Scrollmonitor
A simple and fast API to monitor elements as you scroll
Stars: ✭ 3,250 (+810.36%)
Mutual labels: viewport
React on screen
😎 Check if your react component are visible on the screen without pain and with performance in mind 😎!
Demo
View the demo.
Installation
$ npm install --save react-on-screen
$ yarn add react-on-screen
A UMD build is also available :
<script src="./dist/ReactOnScreen.min.js"></script>
Usage
Simple
import React from 'react';
import TrackVisibility from 'react-on-screen';
const ComponentToTrack = ({ isVisible }) => {
const style = {
background: isVisible ? 'red' : 'blue'
};
return <div style={style}>Hello</div>;
}
const YourApp = () => {
return (
{/* Some Stuff */}
<TrackVisibility>
<ComponentToTrack />
</TrackVisibility>
{/* Some Stuff */}
);
}
Using a render props
You can use a render props is you want to !
const YourApp = () => {
return (
<TrackVisibility>
{({ isVisible }) => isVisible && <ComponentToTrack />}
</TrackVisibility>
);
}
Track the visibility only once
For many cases you may want to track the visibility only once. This can be done simply as follow :
const YourApp = () => {
return (
<TrackVisibility once>
<ComponentToTrack />
</TrackVisibility>
);
}
Defining offset
Using offset
props can be usefull if you want to lazy load an image for instance.
const YourApp = () => {
return (
<TrackVisibility offset={1000}>
{({ isVisible }) => isVisible ? <ComponentToTrack /> : <Loading />}
</TrackVisibility>
);
}
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.
const YourApp = () => {
return (
<TrackVisibility partialVisibility>
{({ isVisible }) => <ComponentToTrack />}
</TrackVisibility>
);
}
Use the html tag of your choice
const YourApp = () => {
return (
<TrackVisibility partialVisibility tag="h1">
{({ isVisible }) => <ComponentToTrack />}
</TrackVisibility>
);
}
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 |
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].