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.
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 i 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
data-cast-number-field-name="123"
data-cast-float-field-name="3.14"
data-cast-number-field-name='{ "first_name": "Joe", "last_name": "Doe" }'
data-cast-float-field-name="true"
data-cast-float-field-name="3.14"
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.
attribute | key in props | value |
---|---|---|
data-cast-number-age="3.14" | age | 3 |
data-cast-float-pi-value="3.14" | piValue | 3.14 |
data-cast-json-data='{"piValue": 3.14}' | data | { piValue: 3.14 } |
data-cast-boolean-is-active="true" | isActive | true |
data-cast-boolean-is-active="0" | isActive | false |
data-cast-string-index="0001" | index | "0001" |
In js/html logic the default type is string, if that works for you then there is no need to use data-cast-type
convention, but its really helpful if you have to pass json objects into components
// ./some/path.js
import { ReactSupervisor } from "react-supervisor";
import Button from '@material-ui/core/Button';
ReactSupervisor.registerComponent(".material-ui-button", Button);
ReactSupervisor.initialize();
<!-- ./some/page.html -->
<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>
// ./path.js
import { ReactSupervisor } from "react-supervisor";
import Button from '@material-ui/core/Button';
ReactSupervisor.registerComponentWithCustomRender(".awesome-button", (el, props) => {
// do whatever you want with props or any other logic
ReactDOM.render(<Button {...props} />, el);
});
<!-- ./some/page.html -->
<div class="awesome-button" data-children="Awesome click!" data-color="primary"></div>
// ./some/path.js
import { ReactSupervisor } from "react-supervisor";
import React, { useState } from "react";
const CallMeModalComponent = () => {
const [state, setState] = useState(0);
return (<>Call me</>);
};
ReactSupervisor.registerComponent(".call-me-modal", CallMeModalComponent);
// no export needed, but you have to import that file in your entrypoint
<!-- ./page.html -->
<div class="call-me-modal"></div>
// ./path.js
import { ReactSupervisor } from "react-supervisor";
import React, { useState } from "react";
import { TextField } from '@fluentui/react/lib/TextField';
ReactSupervisor.registerComponent(".fluent-ui-textarea", TextField);
<!-- ./page.html -->
<div class="fluent-ui-textarea" data-label="Description" data-name="description" data-rows="3"></div>
<div class="user-details" data-cast-json-user-details='{ "first_name": "Joe", "age": 256 }'></div>
This syntax will inject a userDetails
object in component's props
.
const UserDetailsComponent = (props) => {
return (<>${props.userDetails?.first_name}</>); // Joe
}
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 70 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
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
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.
Security News
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.