react-plugin-system
React plugin development system
Describe
Independent react plugin development, plugin can be quickly inserted and pulled out, plugin async loading mode.
How to use
// src/index.js;let pages = require;pages;
// src/pages/*/*.jsximport React from "react";import callPlugin Plugin from "react-plugin-system";Component { ; thisstate = ; } /** * add */ addHandle = // callPlugin const path = ; const plugin = await import"@plugins/" + path; plugindefault a: 1 ; /** * infoClose */ { console } { const path = ; return <div> <Button ="plus" =>新增</Button> <Plugin = = /> </div> }
plugin demo
Add plugin
// src/plugins/add/config.js id: "add" index: "add/index.js";
// scr/plugins/add/index.js; { const calllBack = {} } = config; message; ;}
Info plugin
// src/plugins/info/config.js id: "info" index: "info/index.jsx";
// scr/plugins/info/index.jsx;;Component { superprops; thisstate = {}; } { const onClose = {} } = thisprops; notification"info" message: "Project info" description: "Here is the notice!" { ; } ; ; { return <Button icon="info-circle" onClick=thisclickHandle> Info </Button> ; }}
Notice
The system needs to add "@plugins" alias.
// webpack.config.js alias: "react-native": "react-native-web" "@plugins": path
License
Licensed under the Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)