6.0.0 • Published 7 months ago

react-dom-lazyload-component v6.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

react-dom-lazyload-component

npm version

Lazyload your Components, Images or anything else. You can improve performance score lik Core Web Vitals.

Features

  • ⚡️ Optimized performance: Reuses Intersection Observer instances where possible
  • 💥 Minimum bundle: Around ~1kB
  • 🛠 TypeScript: It'll fit right into your existing TypeScript project
  • 💡 Easy to understand: You don't have to know about complex Intersection Observer API
  • 😽 React 18: Optimized using Suspense and startTransition

Install

npm i react-dom-lazyload-component
yarn add react-dom-lazyload-component
pnpm add react-dom-lazyload-component

Usage

import { lazy } from 'react';
import LazyLoad, { useLazyLoad } from 'react-dom-lazyload-component';
import { Header, Main, Loading } from './MyComponents';

const Footer = React.lazy(() => import('./Footer'))

const App = () => (
    <>
        <Header />
        <Main />
        {/* Footer don't needed to be rendered first. */}
        {/* In this case, it will have been rendered in browser viewport. */}
        {/* This will optimize Core Web Vitals */}
        <LazyLoad
          as='footer'
          fallback={<Loading />}
          suspense
        >
          <Footer />
        </LazyLoad>
    </>
)

// You can also use hooks.
const App = () => {
    const { ref, isVisible } = useLazyLoad();

    return (
        <>
            <Header />
            <Main />
            <footer ref={ref}>{isVisible ? 'footer' : <Loading />}</footer>
        </>
    )
}

Props

useLazyLoad

NameRequiredTypeDefaultDescription
rootIdNostring-The id of element which is IntersectionObserver's target. If rootId is not specified, then the bounds of the actual document viewport are used. This prop wraps IntersectionObserver.root because of performance.
directionNo'vertical' | 'horizontal''vertical'Direction which user will scroll.
marginNostring'0px'Margin around the root element. For examples, if direction is vertical and margin is 200px, IntersectionObserver.thresholds is 200px 0px.
forceVisibleNobooleanfalseYou can forces the component to display regardless of whether the element is visible in the viewport.
onceNobooleantrueYou can control whether the element in the viewport is shown at once or not.

The return value is ref and isVisible. You can use ref to attach to the element you want to observe, and isVisible to determine if the element is visible in the viewport.

LazyLoad

You can specify the following props in addition to the useLazyLoad props.

NameRequiredTypeDefaultDescription
childrenYesReactNode-Component is rendered when it is in the viewport. Automatically enable React.Suspense if you use React.lazy .
fallbackNoReactNode-Component is rendered when it is not in the viewport.
asNostringdivYou can specify tag name to LazyLoad component.
suspenseNobooleanfalseYou can use React.Suspense .
onVisibleNo() => void-Callback function called when the component has been visible.

LazyLoad also can be received props like className, style and id.

Browser Support

Please see Intersection Observer API.

Demo

https://hiroki0525.github.io/react-dom-lazyload-component/

6.0.0

7 months ago

5.1.0

7 months ago

5.0.0

9 months ago

3.0.1

2 years ago

4.1.4

2 years ago

4.1.3

2 years ago

4.1.5

2 years ago

4.1.0

2 years ago

4.0.0

2 years ago

4.1.2

2 years ago

4.1.1

2 years ago

3.0.0

3 years ago

2.3.0

3 years ago

2.2.0

3 years ago

2.1.0

3 years ago

2.0.0

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago