Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
By Sarah Gooding - Sep 20, 2024
react-supervisor
Advanced tools
react-supervisor
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
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
# or
yarn add react-supervisor
Usage
// some.js
import { ReactSupervisor } from "react-supervisor";
import ReactDOM from "react-dom";
import { Button } from "@material-ui"
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(el, <Button {...props} />);
});
const reactSupervisor = ReactSupervisor.initialize();
<!-- some.html -->
<html lang="en">
<body>
<div class="admin-dashboard">
<div></div>
</div>
<div class="chat-bot"></div>
<div class="call-me-modal"></div>
<div class="awesome-button" data-label="Awesome button" data-color="secondary"></div>
<div class="really-awesome-button" data-label="Really awesome button" data-color="primary"></div>
<!-- it could be in a <head> as well. It's listening on DOMContentLoaded -->
<script src="index.js"></script>
</body>
</html>
output
Contributing
Any help would be much appreciated. For major changes, please open an issue first to discuss what you would like to change.
License
Keywords
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.
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.
Package last updated on 14 Jun 2021
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.
Related posts
Security News
Understanding License Exceptions: What Developers Need to Know
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
By Sarah Gooding - Sep 20, 2024
Security News
Developer Accuses Tencent of Copyright Violation After Python Utility’s License Changed from GPLv3 to BSD
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.
By Sarah Gooding - Sep 18, 2024