# react-asyncmodule-chunk

> react asyncmodule chunk

Latest version **1.1.0** (published 2020-04-02) · 0 weekly downloads

## Install

```sh
npm install react-asyncmodule-chunk
pnpm add react-asyncmodule-chunk
yarn add react-asyncmodule-chunk
bun add react-asyncmodule-chunk
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-04-02 |
| First published | 2019-05-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.2.0 |
| Dependencies | 2 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | caoren |
| Maintainers | caor1987 |
| Keywords | react, asyncmodule, provider |

## Links

- npm: https://www.npmjs.com/package/react-asyncmodule-chunk
- Repository: https://github.com/caoren/react-asyncmodule
- Issues: https://github.com/caoren/react-asyncmodule/issues
- npm.io page: https://npm.io/package/react-asyncmodule-chunk

## Dependencies (2)

- [create-react-context](https://npm.io/package/create-react-context.md) >=0.3.0
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.0

## 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.1.0 (latest) — 2020-04-02
- 1.2.0-beta.6 (beta) — 2021-03-12
- 1.2.0-beta.5 — 2021-03-09
- 1.2.0-beta.4 — 2021-02-02
- 1.2.0-beta.3 — 2021-01-25
- 1.2.0-beta.0 — 2020-12-26
- 1.2.0-alpha.1 — 2020-05-14
- 1.2.0-alpha.0 — 2020-04-16
- 1.1.0-alpha.1 — 2020-03-13
- 1.1.0-alpha.0 — 2020-03-11
- 1.0.1 — 2019-09-10
- 1.0.0 — 2019-05-23

## README

# react-asyncmodule-chunk

react-asyncmodule's Provider.

# Installation

```javascript
npm install react-asyncmodule-chunk
```

## AsyncChunk

该组件获取到当前匹配到的组件的 `chunkName`(就是上面 chunk 方法的返回) 和 `getInitialData` 组件上的静态方法，通常用于 server render。

```javascript
import AsyncChunk from 'react-asyncmodule-chunk';
import { StaticRouter } from 'react-router';
import { renderToStaticMarkup } from 'react-dom/server';

const context = {};
const modules = [];
const saveModule = (module) => {
    modules.push(module);
}
renderToStaticMarkup(
    <StaticRouter
        location={url}
        context={context}
    >
        <AsyncChunk report={saveModule}>
            <Approutes />
        </AsyncChunk>
    </StaticRouter>
);
// [{ chunkName: 'list', getInitialData: [Function] ]
```

如果你未使用任何第三方数据状态管理库(如redux)，获取到数据后可通过 `AsyncChunk` 组件的 `receiveData` props传递数据至组件上。

```javascript
module[0].getInitialData({ ctx.req }).then((data) => {
    const html = renderToString(
        <StaticRouter
                location={url}
                context={context}
            >
            <AsyncChunk receiveData={data}>
                <Approutes />
            </AsyncChunk>
        </StaticRouter>
    );
});
```

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