mrga
Reactive component creator for React
Last updated 3 years ago by zolbooo .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install mrga 
SYNC missed versions from official npm registry.

MRGA - Make React great again

npm version npm total downloads Codacy Badge

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 <input>-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.

Current Tags

  • 1.0.3-2                                ...           latest (3 years ago)

6 Versions

  • 1.0.3-2                                ...           3 years ago
  • 1.0.3-1                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (2)
Dev Dependencies (6)
Dependents (0)
None

Copyright 2014 - 2021 © npmmirror.com |