Visual automata-based programming for React

by React

Rosmaro for React

This repository contains a React component that allows to build user interfaces which behavior is modeled using visual automata-based programming.

The Snippet

npm install --save rosmaro rosmaro-in-memory-storage rosmaro-process-wide-lock rosmaro-react
mkdir src/handlers && touch src/handlers/all.js && touch src/graph.json

import makeStorage from 'rosmaro-in-memory-storage';
import makeLock from 'rosmaro-process-wide-lock';
import RosmaroReact from 'rosmaro-react';
import graph from './graph.json'; // The generated graph
import handlers from './handlers/all';

// ...

const rosmaroOpts = {
  graph,
  handlers,
  storage: makeStorage(),
  lock: makeLock()
};

ReactDOM.render(<RosmaroReact {...rosmaroOpts} />, document.getElementById('root'));

How to use RosmaroReact?

First, we need to get the component.

npm i rosmaro-react --save

Please bear in mind that in order to use this package, rosmaro must be installed as well.

npm i rosmaro --save

Then, we can import it.

import RosmaroReact from 'rosmaro-react';

It gives us a component that takes as props everything the regular rosmaro factory function takes.

import RosmaroReact from 'rosmaro-react';

// ...

const rosmaroOpts = {
  graph,
  handlers,
  storage,
  lock,
  afterTransition
};

const rosmaroDrivenComponent = <RosmaroReact {...rosmaroOpts} />;

ReactDOM.render(
  rosmaroDrivenComponent, 
  document.getElementById('root')
);

GitHub