grapecitycarlzhang / react-lazyable

use react suspense and lazy api to async loading component, support antd component

Welcome to React-Lazyable!

Use react suspense and lazy to async loading component, support antd components. Thanks for react code splitting, loadable-components and react-loadable. If you want to do code-splitting in a server rendered app or require other features, please use the components mentioned above.

Install

npm i react-lazyable
yarn add react-lazyable

Example

import * as React from "react";
import { loadable } from "react-lazyable";

const LoadableComponent= loadable({
    loader:() => import('./my-component')
})

export default class OtherComponent extends React.Component {
    render(){
        const props = {
            prop1:'',
            prop2:'',
        };
        const children = this.props.children;
        return <LoadableComponent{...props}>{children}</LoadableComponent>
    }
}

Options

loader (required)

required.

lazyload({loader:() => import('react-component')})
lazyload({loader:() => import('./my-component')})

loading (optional)

lazyload({
    loader:() => import('react-component'),
    loading:() => <loading/>
})

delay (optional)

lazyload({
    loader:() => import('react-component'),
    delay:1000
})

export (optional)

lazyload({
    loader:() => import('react-component'),
    export:(d) => d.wantExport || d.default
})

forwardRef (optional)

If you want to get ref manually, set forwardRef to true.

identifier (optional)

Set component's identifier name.

statics (optional)

The option using for antd component static propertise, use babel-plugin-import-antd-async for it.