reactLoader

@teamix/teamix-react-loader

Load react component with cdn

基本用法

import TeamixReactLoader from '@teamix/teamix-react-loader';

const loaderOption = {
  dependencies: {},
  fallback: 'loading...',
  error: 'error',
};

const option = {
  js: '',
  css: '',
}

const load = TeamixReactLoader(loaderOption);
const Component = load(option);

// Then you can use Component like normal react Component:
// <Component {...props} />
// ReactDOM.render(<Component />, mountNode);

loaderOption

| 参数名 | 说明 | 必填 | 类型 | 默认值 | | ------ | ---- | ---- | ---- | ------ | | dependencies | 组件需要的额外依赖 | | Dependencies | - | | fallback | 组件加载时显示的元素 | | ReactNode | - | loading... | | error | 组件加载时错误时显示的元素 | | ReactNode | - | error |

option

| 参数名 | 说明 | 必填 | 类型 | 默认值 | | ------ | ---- | ---- | ---- | ------ | | js | 需要加载的组件js地址 | ✅ | String | - | | css | 需要加载的组件css地址 | | String | - | |

Dependencies

组件内置的依赖如下：

import * as React from 'react';
import * as ReactDOM from 'react-dom';

export const DEFAULT_RUNTIME_DEPENDENCIES = {
  react: React,
  'react-dom': ReactDOM,
};

loaderOption 参数的 dependencies 也应该如上结构，同时也可以使用 setDefaultDependencies 全局设置。

import TeamixReactLoader from '@teamix/teamix-react-loader';
import * as antd from 'antd';
import MyComponent from '@teamix/my-component';

TeamixReactLoader.setDefaultDependencies({
  antd,
  '@teamix/my-component': MyComponent,
});

TeamixReactLoader.setDefaultFallback(<p>Component is loading</p>);

TeamixReactLoader.setDefaultError(<p>Component Error</p>);