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.