mrga
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3-2 • Public • Published

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

    Install

    npm i mrga

    DownloadsWeekly Downloads

    0

    Version

    1.0.3-2

    License

    MIT

    Unpacked Size

    21.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • unkrush