React Nucleo

React bindings for Nucleo JS.

Run the project example:

yarn && yarn build:dev
cd example
yarn && yarn start

Installation

Using NPM:

npm install react-nucleo --save

Using Yarn:

yarn add react-nucleo

Reference

React Nucleo uses the React Context API to share the store between components.

Documentation

Provider

Props

• store (Nucleo Store) object.
• children (React Element).

import { Provider } from "react-nucleo";

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <ROOT />
      </Provider>
    );
  }
}

Inject

Arguments

• contracts You must be past all contracts that you want to receive updates.

Returns

• WrappedComponent React Element decorated with: specifyed contracts, update and dispatch functions.

import React from "react";
import { inject } from "react-nucleo";
import { countContract, userContract } from "../contracts";

const Counter = ({ update, count, user }) => {
  return (
    <div>
      <h2>Counter: {user.name}</h2>
      <p>{`count: ${count.value}`}</p>
      <button onClick={() => update("count")({ value: count.value + 1 })}>
        +
      </button>
      <button onClick={() => update("count")({ value: count.value - 1 })}>
        -
      </button>
    </div>
  );
};

export default inject(countContract, userContract)(Counter);