npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-observer-api

v1.0.14

Published

React lazy loading component, images, etc. It will monitor element and tell you when element enters into the viewport.

Downloads

3,488

Readme

REACT LAZY LOAD

Version License Size

React Lazy Loading - It is easy to integrate with React to Lazyload components, Images, etc. It will monitor element and tell you when element enters into the viewport. So that can perform any operation when the component in viewport and initial load will get reduce. Implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages.
Internally used Intersection Observer API

💥💥💥 React library for Multiselect Dropdown. Check it Out 💥💥💥

Features

  • 🎧 Hooks or Component - With useVisibilityHook it's easier to monitor elements and perform any operations.
  • 🔥 Performance - No multiple listener for scroll, resize, etc.
  • 🔦 Bundle - Light weight, ~3.5kb
  • 🎁 Features - forceVisible, forceCheck to manually perform operations.
  • 💥 Memory optimization - Observer will disconnect once component reached viewport/unmount

Installation

React Lazy Load requires React v16.8 or later.

npm install --save react-observer-api

Usage

1. Using Hook

isVisible will be true once DOM is visible in the viewport.
setElement need to pass it to the ref as shown below.

import { useVisibilityHook } from 'react-observer-api';

export default () => {
    const { setElement, isVisible } = useVisibilityHook();

    useEffect(() => {
        if (isVisible) {
            ...Logics/API call can trigger by watching isVisible property
        }
    }, [isVisible])

    return {
        <div ref={setElement}>
            {isVisible && (
                <>
                    ...Component need to render goes here....
                <>
            )}
        </div>
    }
}

Config Options - Optional

It allow to pass config options as param (optional).

{
    root: null,
    rootMargin: '0px',
    threshold: 1.0,
    always: false
}

For more details about options and usage, Click here

import { useVisibilityHook } from 'react-observer-api';

export default () => {
    const { setElement, isVisible } = useVisibilityHook({
        threshold: 0.5,
        rootMargin: '100px',
        always: false
    });
    ...
}

Always Observe

For some cases, you may want to continue to observe the dom node as it enters and exits the viewport. In this scenario, passing always: true in the config will enable this.

useVisibilityHook({ always: true });

<LazyLoad config={{ always: true }}>

Force Visible

For some case, based on condition/logic may need to show the dom before it reaches to viewport. In that scenario, by calling forceVisible() will load the dom.

import { useVisibilityHook } from 'react-observer-api';

export default () => {
    const { setElement, isVisible, forceVisible } = useVisibilityHook();

    useEffect(() => {
        forceVisible(); // isVisible become true, by manually calling this method.
    }, [])
    
    return {
        <div ref={setElement}>
            {isVisible && (
                <>
                    ...Component need to render goes here....
                <>
            )}
        </div>
    }
}

2. Using Component

The above same can achieved through Component as well. Need to wrap LazyLoad on top of the component for lazyloading

import { LazyLoad } from 'react-observer-api';

export default () => {
    
    return {
        <LazyLoad>
            <>...Component goes here....</>
        </LazyLoad>
    }
}

Optional Props

| prop | Type | Default | Description | | ------------- |-----| -----| ----------- | | options | object | { root: null, threshold: 0.25, rootMargin: '-10px', always: false } | Click for more usage about options| | as | string | div | Wrapper element can be change by passing valid tag name. Ex: span / p / div | | style | object | {} | Custom CSS for wrapper element| | forceVisible | boolean | false | Passing true to render dom without waiting to reach the viewport|

Example

import { LazyLoad } from 'react-observer-api';

export default () => {
    const style = {
        padding: 10
    };
    return {
        <LazyLoad as="span" style={style} forceVisible>
            <>...Component goes here....</>
        </LazyLoad>
    }
}

Note

For IE support, need to add polyfill

You can import the polyfill directly or use a service like polyfill.io to add it when needed.

npm i intersection-observer

Then import it in your app:

import 'intersection-observer'

If you are using Webpack (or similar) you could use dynamic imports, to load the Polyfill only if needed. A basic implementation could look something like this:

    /**
    * Do feature detection, to figure out which polyfills needs to be imported.
    **/
    async function loadPolyfills() {
        if (typeof window.IntersectionObserver === 'undefined') {
            await import('intersection-observer')
        }
    }

Licence

MIT