mrga

MRGA - Make React great again

MRGA is reactive component creator-helper function.

Quick start

npm i mrga

Create new component file, for example:

App.js

import React from "react";
import mrga from "mrga";

export default mrga({
  render: flows => {
    return (
      <>
        <p>a: {flows.a}</p>
        <button onClick={() => (flows.a = flows.a + 1)}>Add a</button>
        <p>b: {flows.b}</p>
        <button onClick={() => (flows.b = flows.b + 1)}>Add b</button>
      </>
    );
  },
  flows: {
    a: {
      value: 2
    },
    b: {
      value: 3
    }
  }
});

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Reference

Mrga exports only one default function mrga that accepts:

render function

It's used like a standart React's render function, but other arguments are passed to it: flows - flows defined in component props - props passed to the component handleInput - function that handles onChange event of some -s Example: App.js

import React from "react";
import mrga from "mrga";

export default mrga({
  render: (flows, props, handleInput) => {
    return (
      <h1>{props.title}</h1>
      <h1>{flows.title}</h1>
      <input onChange={handleInput('title')} /> {/* handleInput('title') sets value of flows.title to input's value on its change */}
    );
  },
  flows: {
    title: {
      value: "MRGA"
    }
  }
});

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App title="Hello, world!" {/* title prop is passed to component */}/>, document.getElementById("root"));

props

You can set default props for component by setting props property:

import React from "react";
import mrga from "mrga";

export default mrga({
  render: (flows, props) => {
    return <h1>{props.title}</h1>;
  },
  props: {
    title: "MRGA"
  }
});

If title prop isn't passed to component, in this example will be set to MRGA.

flows

You can define component's flows. They act like reactive variables.

import React from "react";
import mrga from "mrga";

export default mrga({
  render: flows => {
    return (
      <>
        <p>a: {flows.a}</p>
        <button onClick={() => (flows.a = flows.a + 1)}>Click me!</button>
        <p>b: {flows.b}</p>
        <button onClick={() => (flows.b = flows.b + 1)}>Click me!</button>
        <p>sum: {flows.sum}</p>
      </>
    );
  },
  flows: {
    a: {
      value: 2
    },
    b: {
      value: 3
    },
    sum: {
      value: 5,
      uses: ["a", "b"],
      calculate: (a, b) => a + b
    }
  }
});

value property is initial value of flow. You can set calculate and uses property for a flow, uses will pass other flows to calculate function, which is used to determine new value of flow. In this example sum flow uses a and b flows and calculate returns their sum.