All Projects → fkhadra → React On Screen

fkhadra / React On Screen

Licence: mit
Check if a react component in the viewport

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
vw-layout
Mobile website layout with viewport units
Stars: ✭ 47 (-86.83%)
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
screenAdaptation
Android screen UI adaptation
Stars: ✭ 24 (-93.28%)
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
Scrap
📸 Screen capture made easy!
Stars: ✭ 273 (-23.53%)
Mutual labels:  screen
Scrollmonitor
A simple and fast API to monitor elements as you scroll
Stars: ✭ 3,250 (+810.36%)
Mutual labels:  viewport
Imagvue
🎑 Imagvue is an image component for Vue.js
Stars: ✭ 268 (-24.93%)
Mutual labels:  lazy-loading

React on screen npm npm license Coverage Status

😎 Check if your react component are visible on the screen without pain and with performance in mind 😎!

react-on-screen-demo

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