react-supervisor
react-supervisor is a very simple npm library (<= 4kb) for dealing with react components in templates (standard MVC way). If you ever worked with mid/big enterprise software with multiple technologies you probably know how difficult it is to maintain various technologies in one or multiple projects. You will find it very useful to create new components with React and append them in your website in organised way. Hope it will help you!
Warning: This tool is not designed for React apps created via create-react-app or common SPA development. However, if you want to embed multiple SPA apps (like microfrontends or so on) your welcome to use it!
Installation
npm install react-supervisor
yarn add react-supervisor
Usage
import { ReactSupervisor } from "react-supervisor";
ReactSupervisor.initialize();
window["ReactSupervisor"] = ReactSupervisor;
ReactSupervisor.info();
ReactSupervisor.forceRender();
What it does?
- scans the DOM and renders registered components
- takes all data attributes from container and passes them as props to component
- watches for changes to the DOM and renders new components into selectors that match
- the parent of a correctly rendered component will be marked with the rendered class
What it doesn't do?
- doesn't affect your css styles
- doesn't share state - it means that all components are independent
What I can do with it?
You can create complex dashboards, modals, or simple form controls (such as async search, drag & drop or date pickers etc). You can still use your favorite CSS frameworks (such as bootstrap), React UI frameworks (eg Fluent UI, Material-UI, etc) or any other React standalone components (eg react-select). More examples will appear in the documentation soon.
Examples
# Register once and use multiple times
import { ReactSupervisor } from "react-supervisor";
import Button from '@material-ui/core/Button';
ReactSupervisor.registerComponent(".material-ui-button", Button);
ReactSupervisor.initialize();
<div class="material-ui-button" data-children="Click me!" data-color="primary"></div>
<div class="material-ui-button" data-children="And me!" data-color="secondary"></div>
# If you need to render a more complicated component you can use custom render
import { ReactSupervisor } from "react-supervisor";
import Button from '@material-ui/core/Button';
ReactSupervisor.registerComponentWithCustomRender(".awesome-button", (el, props) => {
ReactDOM.render(<Button {...props} />, el);
});
<div class="awesome-button" data-children="Awesome click!" data-color="primary"></div>
# You can register component directly within file
import { ReactSupervisor } from "react-supervisor";
import React, { useState } from "react";
const CallMeModalComponent = () => {
const [state, setState] = useState(0);
return (<>Call me</>);
};
ReactSupervisor.registerComponentWithCustomRender(".my-component", CallMeModalComponent);
<div class="my-component"></div>
# Pass props via data attributes
import { ReactSupervisor } from "react-supervisor";
import React, { useState } from "react";
import { TextField } from '@fluentui/react/lib/TextField';
ReactSupervisor.registerComponentWithCustomRender(".fluent-ui-textarea", TextField);
<div class="fluent-ui-textarea" data-label="Description" data-name="description"></div>
Contributing
Any help would be much appreciated. For major changes, please open an issue first to discuss what you would like to change.
License
MIT