Nurturing Palpable Magnificence

    rrr-lazy

    4.1.0 • Public • Published

    rrr-lazy

    Lazy load component with react && react-router.

    CircleCI dependency status

    Installationg

    rrr-lazy requires React 16.2.0 or later.

    For npm:

    npm install rrr-lazy
    

    For yarn:

    yarn add rrr-lazy
    

    IntersectionObserver is required by this library. You can use this polyfill for old browsers https://github.com/w3c/IntersectionObserver/tree/master/polyfill

    Usage

    Use as a common lazy component

    import React from 'react';
    import { Lazy } from 'rrr-lazy';
     
    const MyComponent = () => (
      <div>
        <Lazy
          rootMargin="300px 0 300px 0"
          render={(status) => (
            if (status === 'unload') {
              return <div>Unload</div>
            }
            if (status === 'loading') {
              return <div>Loading</div>
            }
            if (status === 'loaded') {
              return (
                <img
                  style={{ height: 762, width: 1024 }}
                  src={ status === 'loaded' ? 'http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' : `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg"/>')}`}
                />
              );
            }
            throw new Error('Unknown status');
          )}
        />
      </div>
    );

    Loading data or do something else with lifecycle hooks

    import { lazy } from 'rrr-lazy';
     
    async function onLoading() {
      // Loading data;
      // ...
      return data;
    }
    async function onLoaded() {
      // Do something on loaded
      // ...
      return result;
    }
     
    async function onUnload() {
      // Do something on unload
      // ...
      return result;
    }
     
    async function onError(error) {
      // Do something on error
      console.error(error);
      // ...
      return result;
    }
     
    class App extends React.Component {
      render() {
        // the matched child route components become props in the parent
        return (
          <Lazy
            rootMargin="300px 0 300px 0"
            render={(status) => (
              if (status === 'unload') {
                return <div>Unload</div>
              }
              if (status === 'loading') {
                return <div>Loading</div>
              }
              if (status === 'loaded') {
                return (
                  <img
                    style={{ height: 762, width: 1024 }}
                    src={ status === 'loaded' ? 'http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' : `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg"/>')}`}
                  />
                );
              }
              throw new Error('Unknown status');
            )}
            onLoading={onLoading}
            onLoaded={onLoaded}
            onUnload={onUnload}
            onError={onError}
        />
        )
      }
    }

    API: <Lazy root rootMargin render loaderComponent loaderProps onError onLoaded onUnload onUnloaded />

    Props

    root

    Type: String|HTMLElement Default: null

    This value will be used as root for IntersectionObserver (See root.

    rootMargin

    Type: String Default: null

    This value will be used as rootMargin for IntersectionObserver (See rootMargin.

    render(status, props)

    Type: Function Required

    status can be unload, loading, loaded.

    props are props that passed from Lazy. This is designed for @lazy, and when you use <Lazy> component, you may not need it.

    loaderComponent

    Type: string Default: div

    laoderProps

    Type: string Default: {}

    loaderComponent and loaderProps is used to create a LoaderComponent when status is unload or loaded.

    The result of render(status, props) will be passed to LoaderComponent as children.

    onError()

    onLoaded()

    onLoading()

    onUnload()

    API: @lazy

    Usage:

    @routerHooks({
      fetch: async () => {
        await fetchData();
      },
      defer: async () => {
        await fetchDeferredData();
      },
    })
    @lazy({
      render: (status, props, Component) => {
        if (status === 'unload') {
          return <div style={{ height: 720 }}>Unload</div>;
        } else if (status === 'loading') {
          return <div style={{ height: 720 }}>Loading</div>;
        } else {
          return <Component {...props} />;
        }
      },
      onLoaded: () => console.log('look ma I have been lazyloaded!')
    })
    class MyComponent extends React.Component {
      render() {
        return (
          <div>
            <img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
          </div>
        );
      }
    }

    Or

    class MyComponent extends React.Component {
      render() {
        return (
          <div>
            <img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
          </div>
        );
      }
    }
    const myComponent = lazy({
      render: (status, props, Component) => {
        if (status === 'unload') {
          return <div style={{ height: 720 }}>Unload</div>;
        } else if (status === 'loading') {
          return <div style={{ height: 720 }}>Loading</div>;
        } else {
          return <Component {...props} />;
        }
      },
      onLoaded: () => console.log('look ma I have been lazyloaded!')
    })(MyComponent);

    options

    getComponent

    With webpack 2 import()

    const myComponent = lazy({
      render: (status, props, Component) => {
        if (status === 'unload') {
          return <div style={{ height: 720 }}>Unload</div>;
        } else if (status === 'loading') {
          return <div style={{ height: 720 }}>Loading</div>;
        } else {
          return <Component {...props} />;
        }
      },
      onLoaded: () => console.log('look ma I have been lazyloaded!'),
      getComponent: () => import('./MyComponent'),
    })();

    API: LazyProvider

    You can optionally use LazyProvider and pass a version (such as location) to the value prop. All of the Lazy instances will be reset when version changed.

    Example:

    class Application extends React.Component {
      render() {
        // when pathname changed, all of the Lazy instances will be reset.
        const { pathname, children } = this.state;
        <LazyProvider value={pathname}>
          { children }
        </LazyProvider>
      }
    }

    LICENSE

    MIT

    Install

    npm i rrr-lazy

    DownloadsWeekly Downloads

    8

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    212 kB

    Total Files

    12

    Last publish

    Collaborators

    • kouhin