@teamix/react-loader

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	-
error	组件加载时错误时显示的元素		ReactNode	-

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>);