# react-plugs

> Framework for pluggable react components and rxjs observables

Latest version **0.0.14** (published 2021-05-11) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install react-plugs
pnpm add react-plugs
yarn add react-plugs
bun add react-plugs
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2021-05-11 |
| First published | 2021-04-18 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 36 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | beothorn |
| Maintainers | beothorn |

## Links

- npm: https://www.npmjs.com/package/react-plugs
- Repository: https://github.com/beothorn/reactPlugs
- Homepage: https://github.com/beothorn/reactPlugs#readme
- Issues: https://github.com/beothorn/reactPlugs/issues
- npm.io page: https://npm.io/package/react-plugs

## Dependencies (6)

- [rxjs](https://npm.io/package/rxjs.md) ^6.6.6
- [react](https://npm.io/package/react.md) ^17.0.1
- [@types/rx](https://npm.io/package/@types/rx.md) ^4.1.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [@types/react](https://npm.io/package/@types/react.md) ^17.0.3
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^17.0.2

## Recent versions

- 0.0.14 (latest) — 2021-05-11
- 0.0.13 — 2021-05-11
- 0.0.12 — 2021-05-08
- 0.0.11 — 2021-04-28
- 0.0.10 — 2021-04-28
- 0.0.9 — 2021-04-27
- 0.0.8 — 2021-04-21
- 0.0.7 — 2021-04-21
- 0.0.6 — 2021-04-19
- 0.0.5 — 2021-04-18
- 0.0.4 — 2021-04-18
- 0.0.3 — 2021-04-18
- 0.0.2 — 2021-04-18
- 0.0.1 — 2021-04-18

## README

# react-plugs

Experimental framework for pluggable components using react and rxjs.

A connection is composed by Observables for outputting data, Observers for data input, 
a Properties observable for feeding a react functional component and the react functional component itself.

All those properties are optional. For example you can have a connection that has only an output and does not render
or a connection the has only an input and renders something.

A connection is plugged into the hub using the plug function. The subscription of observers is done depending on 
the component name and its inputs and outputs.

This is an example of a widget that shows a random number

```
import { Hub, Plug } from 'react-plugs'
import { Subject } from 'rxjs'
import * as React from 'react'

const randomNumberSource: Subject<any> = new Subject()

setInterval( () => {
    randomNumberSource.next({randomNumber: Math.random()})
}, 2000)

class RandomNumberGenerator implements Plug {
    name = "RandomNumberGenerator"
    outputs = [
        {
            name: "number",
            outputObservable: randomNumberSource
        }
    ]
}

class RandomNumberDisplay implements Plug {
    name = "RandomNumberDisplay"
    inputs = [
        {
            source: "RandomNumberGenerator:number",
            inputSubscriber: (randomNumberGeneratorOutput) => {
                randomNumberDisplayProps.next({randomNumber: randomNumberGeneratorOutput.randomNumber})
            }
        }
    ]
    renderer = {
        props: randomNumberDisplayProps,
        functionComponent: ({randomNumber}) => <p>Random number: {randomNumber}</p>
    }
}

const hub = new Hub()

hub.plug(new RandomNumberGenerator())
hub.plug(new RandomNumberDisplay())


```

See more on the [demo](https://github.com/beothorn/react-plugs-demo)

---
_Source: https://npm.io/package/react-plugs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._