{"id":30743372,"url":"https://github.com/xcomponent/react-gojs","last_synced_at":"2025-09-04T02:06:58.806Z","repository":{"id":65412052,"uuid":"119673969","full_name":"xcomponent/react-gojs","owner":"xcomponent","description":"GoJS React integration","archived":false,"fork":false,"pushed_at":"2020-08-26T15:02:08.000Z","size":507,"stargazers_count":61,"open_issues_count":0,"forks_count":23,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-08-30T06:36:07.836Z","etag":null,"topics":["diagram","gojs","gojs-diagram","gojs-react","javascript","library","react","redux","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xcomponent.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-31T10:43:19.000Z","updated_at":"2024-10-13T16:53:00.000Z","dependencies_parsed_at":"2023-01-23T10:55:01.549Z","dependency_job_id":null,"html_url":"https://github.com/xcomponent/react-gojs","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"purl":"pkg:github/xcomponent/react-gojs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xcomponent%2Freact-gojs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xcomponent%2Freact-gojs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xcomponent%2Freact-gojs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xcomponent%2Freact-gojs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xcomponent","download_url":"https://codeload.github.com/xcomponent/react-gojs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xcomponent%2Freact-gojs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273539317,"owners_count":25123499,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["diagram","gojs","gojs-diagram","gojs-react","javascript","library","react","redux","typescript"],"created_at":"2025-09-04T02:06:57.852Z","updated_at":"2025-09-04T02:06:58.795Z","avatar_url":"https://github.com/xcomponent.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":":warning: **react-gojs is no longer under active development**. Now, Northwoods provides an official React integration for GoJS: [https://github.com/NorthwoodsSoftware/gojs-react](https://github.com/NorthwoodsSoftware/gojs-react). I will not add new features to this lib, only bug fixes. The migration to the official library is pretty easy. I migrated my example [here](https://github.com/nicolaserny/gojs-react-example).\n\n\n[![](http://slack.xcomponent.com/badge.svg)](http://slack.xcomponent.com/)\n[![NpmVersion](https://img.shields.io/npm/v/react-gojs.svg)](https://www.npmjs.com/package/react-gojs)\n[![npm](https://img.shields.io/npm/dt/react-gojs.svg)](https://www.npmjs.com/package/react-gojs)\n[![Build Status](https://travis-ci.org/xcomponent/react-gojs.svg?branch=master)](https://travis-ci.org/xcomponent/react-gojs)\n[![Coverage Status](https://coveralls.io/repos/github/xcomponent/react-gojs/badge.svg?branch=master)](https://coveralls.io/github/xcomponent/react-gojs?branch=master)\n[![TypeScript](https://badges.frapsoft.com/typescript/love/typescript.png?v=101)](https://github.com/ellerbrock/typescript-badges/)\n\n# react-gojs\n\n_react-gojs_ is a [GoJS](https://gojs.net/latest/index.html) React integration.\n\n## Install\n\nInstall it from npm. It has peer dependencies of react and react-dom, which will have to be installed as well.\n\n```bash\nnpm install --save react-gojs\n```\n\nor:\n\n```bash\nyarn add react-gojs\n```\n\n## Usage\n\nImport `GojsDiagram` in your React component:\n\n```javascript static\nimport GojsDiagram from 'react-gojs';\n```\n\nTo create a GoJS diagram, just use the _GojsDiagram_ React component:\n\n```tsx\n\u003cGojsDiagram\n    diagramId=\"myDiagramDiv\"\n    model={this.props.model}\n    createDiagram={this.createDiagram}\n    className=\"myDiagram\"\n    onModelChange={this.modelChangedhandler}\n    updateDiagramProps={this.updateDiagramProps}\n/\u003e\n```\n\n_GojsDiagram_ is a generic React component which is responsible for rendering and updating (when the model changes) the diagram. The render step is based on the model and the go.Diagram object provided as props. It acts as a go.Diagram wrapper.\n\n_GojsDiagram_ props:\n\n-   diagramId: _id_ required by GoJS.\n-   model: generic model containing nodes and links.\n\nModel type: _DiagramModel\u003cN extends BaseNodeModel, L extends LinkModel\u003e_\n\nExample (_Typescript / Javascript_):\n\n```ts\nconst model = {\n    nodeDataArray: [\n        { key: 'Alpha', color: 'lightblue' },\n        { key: 'Beta', color: 'orange' },\n        { key: 'Gamma', color: 'lightgreen' },\n        { key: 'Delta', color: 'pink' },\n        { key: 'Omega', color: 'grey' }\n    ],\n    linkDataArray: [\n        { from: 'Alpha', to: 'Beta' },\n        { from: 'Alpha', to: 'Gamma' },\n        { from: 'Beta', to: 'Delta' },\n        { from: 'Gamma', to: 'Omega' }\n    ]\n};\n```\n\n-   createDiagram: method called by the React component to create the customized GoJS diagram object. It enables you to customize the look and feel.\n\n_Typescript_ example:\n\n```tsx\nconst createDiagram = (diagramId: string): Diagram =\u003e {\n    const $ = go.GraphObject.make;\n\n    const myDiagram: Diagram = $(go.Diagram, diagramId, {\n        initialContentAlignment: go.Spot.LeftCenter\n    });\n\n    myDiagram.nodeTemplate = $(\n        go.Node,\n        'Auto',\n        $(go.Shape, 'RoundedRectangle', { strokeWidth: 0 }, new go.Binding('fill', 'color')),\n        $(go.TextBlock, { margin: 8 }, new go.Binding('text', 'key'))\n    );\n\n    return myDiagram;\n};\n```\n\n_Javascript (ES6)_ example:\n\n```jsx\nconst createDiagram = diagramId =\u003e {\n    const $ = go.GraphObject.make;\n\n    const myDiagram = $(go.Diagram, diagramId, {\n        initialContentAlignment: go.Spot.LeftCenter\n    });\n\n    myDiagram.nodeTemplate = $(\n        go.Node,\n        'Auto',\n        $(go.Shape, 'RoundedRectangle', { strokeWidth: 0 }, new go.Binding('fill', 'color')),\n        $(go.TextBlock, { margin: 8 }, new go.Binding('text', 'key'))\n    );\n\n    return myDiagram;\n};\n```\n\n-   className: css applied to the _div_ containing our diagram. You should define at least width and height.\n\nExample:\n\n```css\n.myDiagram {\n    width: 70%;\n    height: 400px;\n}\n```\n\n-   onModelChange: the _onModelChange_ event occurs when the diagram model has changed (add/remove nodes/links from the UI). This event is very useful to keep your model (provided as prop) in sync with the diagram.\n\nFor example, in a Redux environment, the diagram model should be immutable (and stored in the redux store). The _onModelChange_ handler can dispatch actions to update the model.\n\n-   updateDiagramProps (optional parameter): Method allows to update/modify Diagram properties dynamically once the diagram has been rendered. It gives more control to the user, as it is a user-defined.\n    Basic implementation of the method.\n\nExample 1:\n\n```\nconst updateDiagramProps = (myDiagram: Diagram): void =\u003e {\n\tmyDiagram.layout = go.GraphObject.make(go.LayeredDigraphLayout, { direction: 90 });\n\n\t// User can add more properties here.\n};\n```\n\nExample 2:\n\n```\nconst updateDiagramProps = (myDiagram: Diagram): void =\u003e {\n\t// Empty method.\n};\n```\n\n## Examples\n\n-   _Typescript_: You can find a react / redux / react-gojs example + live demo [here](https://github.com/nicolaserny/react-gojs-example).\n\n-   _Javascript (ES6)_: You can find a react / react-gojs example + live demo [here](https://github.com/nicolaserny/react-gojs-example-es6).\n\n## Contributing\n\n### Build and Test\n\n```\nyarn install\n```\n\n```\nyarn build\n```\n\n```\nyarn test\n```\n\n### Submit a Pull Request\n\n1.  Fork it!\n2.  Create your feature branch: `git checkout -b my-new-feature`\n3.  Fix lint errors: `yarn lint`\n4.  Commit your changes: `git commit -am 'Add some feature'`\n5.  Push to the branch: `git push origin my-new-feature`\n6.  Submit a pull request\n\n## License\n\n[Apache License V2](https://raw.githubusercontent.com/xcomponent/react-gojs/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxcomponent%2Freact-gojs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxcomponent%2Freact-gojs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxcomponent%2Freact-gojs/lists"}