react-supervisor
Advanced tools
React tool designed to supervise react components. It was created to organise the process of embedding react components into your templates or MVC applications. One library to rule them all.
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!
npm install react-supervisor
# or
yarn add react-supervisor
import { ReactSupervisor } from "react-supervisor";
// register components
ReactSupervisor.initialize();
// optional
window["ReactSupervisor"] = ReactSupervisor;
ReactSupervisor.info(); // generates stats in console
ReactSupervisor.forceRender(); // will force a DOM scan, it's helpful with dynamically created nodes
You can create complex dashboards, modals, or simple form controls (such as async search, drag & drop or date pickers etc). You can still use css frameworks (such as bootstrap) mixed with the power of React. More examples will appear in the documentation - soon ...
// some.js
import { ReactSupervisor } from "react-supervisor";
import ReactDOM from "react-dom";
import Button from '@material-ui/core/Button';
import {
CallMeModal,
AdminDashboard,
ChatBot
} from "./some-react-components"
ReactSupervisor.registerComponent(".admin-dashboard", AdminDashboard);
ReactSupervisor.registerComponent(".chat-bot", ChatBot);
ReactSupervisor.registerComponent(".call-me-modal", CallMeModal);
ReactSupervisor.registerComponent(".awesome-button", Button);
ReactSupervisor.registerComponentWithCustomRender(".really-awesome-button", (el, props) => {
// do whatever you want with props or any other logic
ReactDOM.render(<Button {...props} />, el);
});
ReactSupervisor.initialize();
<!-- some.html -->
<html lang="en">
<body>
<div class="admin-dashboard"></div>
<div class="chat-bot"></div>
<div class="call-me-modal"></div>
<div
class="awesome-button"
data-children="Awesome button"
data-color="secondary"
></div>
<div
class="really-awesome-button"
data-children="Really awesome button"
data-color="primary"
></div>
<script src="index.js"></script>
</body>
</html>
Any help would be much appreciated. For major changes, please open an issue first to discuss what you would like to change.
FAQs
React tool designed to supervise react components. It was created to organise the process of embedding react components into your templates or MVC applications. One library to rule them all.
The npm package react-supervisor receives a total of 79 weekly downloads. As such, react-supervisor popularity was classified as not popular.
We found that react-supervisor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.