# ncnbb-react-loadable

> ncnbb-react-loadable React异步加载组件

Latest version **1.0.0** (published 2020-03-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install ncnbb-react-loadable
pnpm add ncnbb-react-loadable
yarn add ncnbb-react-loadable
bun add ncnbb-react-loadable
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-03-05 |
| First published | 2020-03-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 15 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | lamho |
| Keywords | react, react-loadable, lazy-loader, react-lazy-loader, lazy-loader-component, react-lazy-loader-component, loadable |

## Links

- npm: https://www.npmjs.com/package/ncnbb-react-loadable
- Repository: https://github.com/Ncnbb/ncnbb-react-loadable
- Issues: https://github.com/Ncnbb/ncnbb-react-loadable/issues
- npm.io page: https://npm.io/package/ncnbb-react-loadable

## Dependencies (3)

- [react](https://npm.io/package/react.md) 16.8.0
- [react-dom](https://npm.io/package/react-dom.md) 16.8.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-03-05

## README

<h1 align="center">ncnbb-react-loadable</h1>
<p align="center">React异步加载组件</p>
<p align='center'>
<img alt='npm' src='https://img.shields.io/npm/v/ncnbb-react-loadable'/>
<img alt='NPM' src='https://img.shields.io/npm/l/ncnbb-react-loadable'/>
<img alt='team' src='https://img.shields.io/badge/team-Ncnbb-yellow'/>
</p>

### 简介
基于React封装的统一处理异步加载组件的加载器组件，能更贴合React开发的方式处理异步加载组件的逻辑，对加载失败，加载超时，加载中和加载成功进行处理。

### 安装

```shell
npm install ncnbb-react-loadable
```

### 使用须知
- 项目目录下，必须配置`@babel/plugin-syntax-dynamic-import`插件，让`webpack`处理`import()`特殊Api
- 被加载的组件必须使用`export default`进行导出
- 需要使用react16版本及以上

### 参数

| 属性     | 说明                                  | 类型                                                                | 默认值 |
| -------- | ------------------------------------- | ------------------------------------------------------------------- | ------ |
| loader   | 异步获取组件函数，必须返回一个promise | Function                                                            | 必传   |
| loading  | 加载中展示组件                        | JSX.Element、JSX.Component                                          | null   |
| error    | 加载错误展示组件                      | JSX.Element、JSX.Component                                          | null   |
| overTime | 加载超时展示组件                      | JSX.Element、JSX.Component                                          | null   |
| timeout  | 超时时间                              | number                                                              | null   |
| delay    | 延迟加载时间                          | number                                                              | null   |
| callback | 状态回调                              | Function(status: 'done'\|'error'\|'overTime', error: Error \| null) | null   |


### 实例

```jsx

import loadable from 'ncnbb-react-loadable';

const LoadableComponent = loadable( {
    loader: () => import( './Sub.jsx' ),
    loading: Loading,
    timeout: 2000,
    delay: 3000,
    error: Error,
    callback: (status, error) => {console.log(status)},
    overTime: <OverTime />
} );

render () {
    return (
        <div>
            <LoadableComponent num={this.state.num} text='这是一个加载后的内容' />
        </div>
    );
}

```

---
_Source: https://npm.io/package/ncnbb-react-loadable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._