react-plugs
A library for pluggable components using react and rxjs.
Example:
import { Hub, Plug } from 'react-plugs'
import * as React from 'react'
import { BehaviorSubject } from 'rxjs'
const hotRandomNumber: BehaviorSubject<any> = new BehaviorSubject({randomNumber: Math.random()})
setInterval( () => {
hotRandomNumber.next({randomNumber: Math.random()})
}, 2000)
// A random number generator, it has an output
// that other plugs can subscribe to using source "RandomNumberGenerator:number"
// Only the name is a required field
const randomNumberGenerator = {
name: "RandomNumberGenerator",
outputs: [
{
name: "number",
outputObservable: hotRandomNumber
}
]
}
// This will display the last random number generated
class RandomNumberDisplay implements Plug {
widgetProps: Subject<any> = new Subject()
name = "RandomNumberDisplay"
inputs = [
{
// subscribes to "RandomNumberGenerator:number"
// if RandomNumberGenerator is not yet plugged but is added later this
// input will subscribe to it when RandomNumberGenerator is added
source: "RandomNumberGenerator:number",
inputSubscriber: (randomNumberGeneratorOutput) => {
// Update props for functionComponent by calling the props observable
this.widgetProps.next({randomNumber: randomNumberGeneratorOutput.randomNumber})
}
}
]
renderer = {
// An observable for the properties passed to function component
props: this.widgetProps,
functionComponent: ({randomNumber}) => <p>Random number: {randomNumber}</p>
}
}
const hub = new Hub()
hub.plug(randomNumberGenerator)
hub.plug(new RandomNumberDisplay())
setInterval( () => {
hub.unplug("RandomNumberDisplay") // also will unsubscribe all observers from any input or output
}, 6000)
See more on the demo
Instalation:
npm install --save react-plugs
Debugger connection
This will print some debugging:
hub.plug({
name: "Debugger",
inputs: [{
source: "Hub:debug",
inputSubscriber: (a: string) => console.log(a)
}]
})
Custom renderer
const Renderer:React.FunctionComponent<{
components: Map<string, React.FunctionComponent> ,
props: Map<string, any>
}> = ({ components, props }) => {
const rendered: React.ReactElement[] = []
components.forEach( (Component, key) =>
rendered.push(
<div className="box">
<h1>{key}</h1>
<Component key={key} {...(props.get(key))} />
</div>
)
)
return <React.StrictMode>
{rendered}
</React.StrictMode>
}
new Hub((components, props) =>
ReactDOM.render(
Renderer({ components, props),
document.getElementById('main')
)
)