Lazily import React components
npm install react-import[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url]
A wrapper for lazy import of React components
npm install --save react-import
`Usage
Basic usage:
`javascript
import React, { PureComponent } from 'react'
import Import from 'react-import'class MyComponent extends PureComponent {
// ...
render() {
// ...
return (
<>
component={import('./another-component')}
some="prop"
another={1}
/>
>
)
}
}
`You can also pass an import function as
load prop which will be called once the Import component is mounted.
`javascript
// ...
return (
load={() => import('./another-component')}
some="prop"
another={1}
/>
)
// ...
`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.
`javascript
// ...
return (
component={import('./another-component')}
loading={wait...}
error={error!}
onLoad={() => console.log('component has loaded!')}
onError={() => console.error('component has failed to load :('))}
/>
)
// ...
``[npm-url]: https://npmjs.org/package/react-import
[downloads-image]: http://img.shields.io/npm/dm/react-import.svg
[npm-image]: http://img.shields.io/npm/v/react-import.svg
[david-dm-url]:https://david-dm.org/inker/react-import
[david-dm-image]:https://david-dm.org/inker/react-import.svg
[david-dm-dev-url]:https://david-dm.org/inker/react-import#info=devDependencies
[david-dm-dev-image]:https://david-dm.org/inker/react-import/dev-status.svg