项目作者: inker

项目描述 :
A wrapper for lazy import of React components
高级语言: JavaScript
项目地址: git://github.com/inker/react-import.git
创建时间: 2017-09-22T17:02:29Z
项目社区:https://github.com/inker/react-import

开源协议:

下载


react-import

NPM version Downloads Dependency status Dev Dependency status

A wrapper for lazy import of React components

Installation

  1. npm install --save react-import

Usage

Basic usage:

  1. import React, { PureComponent } from 'react'
  2. import Import from 'react-import'
  3. class MyComponent extends PureComponent {
  4. // ...
  5. render() {
  6. // ...
  7. return (
  8. <>
  9. <Import
  10. component={import('./another-component')}
  11. some="prop"
  12. another={1}
  13. ></Import>
  14. </>
  15. )
  16. }
  17. }

You can also pass an import function as load prop which will be called once the Import component is mounted.

  1. // ...
  2. return (
  3. <Import
  4. load={() => import('./another-component')}
  5. some="prop"
  6. another={1}
  7. />
  8. )
  9. // ...

Additional props can be used: loading specifying the React component which should be displayed while the component is loading, and onLoad function called once the component is loaded, error specifying the React component which should be displayed on error, and onError function called on error.

  1. // ...
  2. return (
  3. <Import
  4. component={import('./another-component')}
  5. loading={<div>wait...</div>}
  6. error={<div>error!</div>}
  7. onLoad={() => console.log('component has loaded!')}
  8. onError={() => console.error('component has failed to load :('))}
  9. />
  10. )
  11. // ...