react-gojs-example

Example to show how to use GoJS in a React/Redux environment with react-gojs.

You can try the live demo here.

Requirements

• Node.js
• Yarn

Build and Start

• Run yarn install
• Run yarn run build
• Run yarn start

How it works?

GoJS is not designed to work out of the box with React and Redux. This project shows how to create a GoJS diagram with react-gojs. react-gojs provides a generic React component that wraps the diagram object and makes the integration in a React project easier.

Key parts of the project:

• Diagram model (DiagramModel<NodeModel, LinkModel> type): The model is stored in the redux state. The idea is to add, remove or update nodes or links by dispatching actions.
• MyDiagram: example of a presentational component that uses GojsDiagram with a custom layout (based on the GoJS minimal sample)
• MyDiagramContainer: example of a container component connected to a redux store (the react+redux container pattern)
• The onModelChange event (MyDiagram component) is used to sync our model (in the redux state) when a link or a node is removed from the ui diagram (with the delete key for example).

License

MIT License