{"id":26914586,"url":"https://github.com/plotly/react-cytoscapejs","last_synced_at":"2025-05-15T13:05:44.916Z","repository":{"id":38867706,"uuid":"139898873","full_name":"plotly/react-cytoscapejs","owner":"plotly","description":"React component for Cytoscape.js network visualisations","archived":false,"fork":false,"pushed_at":"2025-01-27T14:20:05.000Z","size":294,"stargazers_count":500,"open_issues_count":44,"forks_count":66,"subscribers_count":35,"default_branch":"master","last_synced_at":"2025-05-11T20:43:00.072Z","etag":null,"topics":["bioinformatics","network-graph","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/plotly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"https://plot.ly/products/consulting-and-oem/"}},"created_at":"2018-07-05T20:48:58.000Z","updated_at":"2025-04-21T03:50:34.000Z","dependencies_parsed_at":"2023-02-08T08:50:15.815Z","dependency_job_id":"a763e195-7cd1-4ad4-bfc0-d904eeedef96","html_url":"https://github.com/plotly/react-cytoscapejs","commit_stats":{"total_commits":45,"total_committers":14,"mean_commits":"3.2142857142857144","dds":"0.48888888888888893","last_synced_commit":"3808c36148f6e79ad2be8cd76f20db9dfaa11a57"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotly%2Freact-cytoscapejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotly%2Freact-cytoscapejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotly%2Freact-cytoscapejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotly%2Freact-cytoscapejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/plotly","download_url":"https://codeload.github.com/plotly/react-cytoscapejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254346624,"owners_count":22055808,"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","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":["bioinformatics","network-graph","react"],"created_at":"2025-04-01T17:28:50.986Z","updated_at":"2025-05-15T13:05:44.892Z","avatar_url":"https://github.com/plotly.png","language":"JavaScript","readme":"# react-cytoscapejs\n\nThe `react-cytoscapejs` package is an MIT-licensed [React](https://reactjs.org) component for network (or graph, as in [graph theory](https://en.wikipedia.org/wiki/Graph_theory)) visualisation. The component renders a [Cytoscape](http://js.cytoscape.org) graph.\n\nMost props of this component are [Cytoscape JSON](http://js.cytoscape.org/#core/initialisation).\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://dash.plotly.com/project-maintenance\"\u003e\n    \u003cimg src=\"https://dash.plotly.com/assets/images/maintained-by-plotly.png\" width=\"400px\" alt=\"Maintained by Plotly\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## Usage\n\n### npm\n\n```bash\nnpm install react-cytoscapejs\nnpm install cytoscape@3.x.y # your desired version, 3.2.19 or newer\n```\n\n### yarn\n\n```bash\nyarn add react-cytoscapejs\nyarn add cytoscape@3.x.y # your desired version, 3.2.19 or newer\n```\n\nNote that you must specify the desired version of `cytoscape` to be used.  Otherwise, you will get whatever version npm or yarn thinks best matches this package's compatible semver range -- which is currently `^3.2.19` or any version of 3 newer than or equal to 3.2.19.\n\n\nThe component is created by putting a `\u003cCytoscapeComponent\u003e` within the `render()` function of one of your apps's React components. Here is a minimal example:\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport CytoscapeComponent from 'react-cytoscapejs';\n\nclass MyApp extends React.Component {\n  constructor(props){\n    super(props);\n  }\n\n  render(){\n    const elements = [\n       { data: { id: 'one', label: 'Node 1' }, position: { x: 0, y: 0 } },\n       { data: { id: 'two', label: 'Node 2' }, position: { x: 100, y: 0 } },\n       { data: { source: 'one', target: 'two', label: 'Edge from Node1 to Node2' } }\n    ];\n\n    return \u003cCytoscapeComponent elements={elements} style={ { width: '600px', height: '600px' } } /\u003e;\n  }\n}\n\nReactDOM.render( React.createElement(MyApp, document.getElementById('root')));\n```\n\n## `Basic props`\n\n### `elements`\n\nThe flat list of [Cytoscape elements](http://js.cytoscape.org/#notation/elements-json) to be included in the graph, each represented as non-stringified JSON. E.g.:\n\n```jsx\n\u003cCytoscapeComponent\n  elements={[\n    { data: { id: 'one', label: 'Node 1' }, position: { x: 0, y: 0 } },\n    { data: { id: 'two', label: 'Node 2' }, position: { x: 100, y: 0 } },\n    {\n      data: { source: 'one', target: 'two', label: 'Edge from Node1 to Node2' }\n    }\n  ]}\n/\u003e\n```\n\nNote that arrays or objects should not be used in an `element`'s `data` or `scratch` fields, unless using a custom `diff()` prop.\n\nIn order to make it easier to support passing in `elements` JSON in the `elements: { nodes: [], edges: [] }` format, there is a static function `CytoscapeComponent.normalizeElements()`.  E.g.:\n\n```jsx\n\u003cCytoscapeComponent\n  elements={CytoscapeComponent.normalizeElements({\n    nodes: [\n      { data: { id: 'one', label: 'Node 1' }, position: { x: 0, y: 0 } },\n      { data: { id: 'two', label: 'Node 2' }, position: { x: 100, y: 0 } }\n    ],\n    edges: [\n      {\n        data: { source: 'one', target: 'two', label: 'Edge from Node1 to Node2' }\n      }\n    ]\n  })}\n/\u003e\n```\n\nNote that `CytoscapeComponent.normalizeElements()` is useful only for plain-JSON data, such as an export from Cytoscape.js or the Cytoscape desktop software.  If you use [custom prop types](#custom-prop-types), such as Immutable, then you should flatten the elements yourself before passing the `elements` prop.\n\n### `stylesheet`\n\nThe Cytoscape stylesheet as non-stringified JSON. Note that the prop key is `stylesheet` rather than `style`, the key used by Cytoscape itself, so as to not conflict with the HTML [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style) attribute. E.g.:\n\n```jsx\n\u003cCytoscapeComponent\n  stylesheet={[\n    {\n      selector: 'node',\n      style: {\n        width: 20,\n        height: 20,\n        shape: 'rectangle'\n      }\n    },\n    {\n      selector: 'edge',\n      style: {\n        width: 15\n      }\n    }\n  ]}\n/\u003e\n```\n\n### `layout`\n\nUse a [layout](http://js.cytoscape.org/#layouts) to automatically position the nodes in the graph. E.g.:\n\n```jsx\nlayout: {\n  name: 'random';\n}\n```\n\nTo use an external [layout extension](http://js.cytoscape.org/#extensions/layout-extensions), you must register the extension prior to rendering this component, e.g.:\n\n```jsx\nimport Cytoscape from 'cytoscape';\nimport COSEBilkent from 'cytoscape-cose-bilkent';\nimport React from 'react';\nimport CytoscapeComponent from 'react-cytoscapejs';\n\nCytoscape.use(COSEBilkent);\n\nclass MyApp extends React.Component {\n  render() {\n    const elements = [\n      { data: { id: 'one', label: 'Node 1' }, position: { x: 0, y: 0 } },\n      { data: { id: 'two', label: 'Node 2' }, position: { x: 100, y: 0 } },\n      { data: { source: 'one', target: 'two', label: 'Edge from Node1 to Node2' } }\n    ];\n\n    const layout = { name: 'cose-bilkent' };\n\n    return \u003cCytoscapeComponent elements={elements} layout={layout} /\u003e;\n  }\n}\n```\n\n### `cy`\n\nThis prop allows for getting a reference to the Cytoscape `cy` reference using a React ref function. This `cy` reference can be used to access the Cytoscape API directly. E.g.:\n\n```jsx\nclass MyApp extends React.Component {\n  render() {\n    return \u003cCytoscapeComponent cy={(cy) =\u003e { this.cy = cy }}\u003e;\n  }\n}\n```\n\n## Viewport manipulation\n\n### `pan`\n\nThe [panning position](http://js.cytoscape.org/#init-opts/pan) of the graph, e.g. `\u003cCytoscapeComponent pan={ { x: 100, y: 200 } } /\u003e`.\n\n### `zoom`\n\nThe [zoom level](http://js.cytoscape.org/#init-opts/zoom) of the graph, e.g. `\u003cCytoscapeComponent zoom={2} /\u003e`.\n\n## Viewport mutability \u0026 gesture toggling\n\n### `panningEnabled`\n\nWhether the [panning position of the graph is mutable overall](http://js.cytoscape.org/#init-opts/panningEnabled), e.g. `\u003cCytoscapeComponent panningEnabled={false} /\u003e`.\n\n### `userPanningEnabled`\n\nWhether the [panning position of the graph is mutable by user gestures](http://js.cytoscape.org/#init-opts/userPanningEnabled) such as swiping, e.g. `\u003cCytoscapeComponent userPanningEnabled={false} /\u003e`.\n\n### `minZoom`\n\nThe [minimum zoom level](http://js.cytoscape.org/#init-opts/minZoom) of the graph, e.g. `\u003cCytoscapeComponent minZoom={0.5} /\u003e`.\n\n### `maxZoom`\n\nThe [maximum zoom level](http://js.cytoscape.org/#init-opts/maxZoom) of the graph, e.g. `\u003cCytoscapeComponent maxZoom={2} /\u003e`.\n\n### `zoomingEnabled`\n\nWhether the [zoom level of the graph is mutable overall](http://js.cytoscape.org/#init-opts/zoomingEnabled), e.g. `\u003cCytoscapeComponent zoomingEnabled={false} /\u003e`.\n\n### `userZoomingEnabled`\n\nWhether the [zoom level of the graph is mutable by user gestures](http://js.cytoscape.org/#init-opts/userZoomingEnabled) (e.g. pinch-to-zoom), e.g. `\u003cCytoscapeComponent userZoomingEnabled={false} /\u003e`.\n\n### `boxSelectionEnabled`\n\nWhether [shift+click-and-drag box selection is enabled](http://js.cytoscape.org/#init-opts/boxSelectionEnabled), e.g. `\u003cCytoscapeComponent boxSelectionEnabled={false} /\u003e`.\n\n### `autoungrabify`\n\nIf true, nodes [automatically can not be grabbed](http://js.cytoscape.org/#init-opts/autoungrabify) regardless of whether each node is marked as grabbable, e.g. `\u003cCytoscapeComponent autoungrabify={true} /\u003e`.\n\n### `autolock`\n\nIf true, [nodes can not be moved at all](http://js.cytoscape.org/#init-opts/autolock), e.g. `\u003cCytoscapeComponent autolock={true} /\u003e`.\n\n### `autounselectify`\n\nIf true, [elements have immutable selection state](http://js.cytoscape.org/#init-opts/autounselectify), e.g. `\u003cCytoscapeComponent autounselectify={true} /\u003e`.\n\n## HTML attribute props\n\nThese props allow for setting built-in HTML attributes on the div created by the component that holds the visualisation:\n\n### `id`\n\nThe [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) attribute of the div, e.g. `\u003cCytoscapeComponent id=\"myCy\" /\u003e`.\n\n### `className`\n\nThe [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute of the div containing space-separated class names, e.g. `\u003cCytoscapeComponent className=\"foo bar\" /\u003e`.\n\n### `style`\n\nThe [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style) attribute of the div containing CSS styles, e.g. `\u003cCytoscapeComponent style={ { width: '600px', height: '600px' } } /\u003e`.\n\n## Custom prop types\n\nThis component allows for props of custom type to be used (i.e. non JSON props), for example an object-oriented model or an [Immutable](http://facebook.github.io/immutable-js/) model. The props used to control the reading and diffing of the main props are listed below.\n\nExamples are given using Immutable. Using Immutable allows for cheaper diffs, which is useful for updating graphs with many `elements`. For example, you may specify `elements` as the following:\n\n```js\nconst elements = Immutable.List([\n  Immutable.Map({ data: Immutable.Map({ id: 'foo', label: 'bar' }) })\n]);\n```\n\n### `get(object, key)`\n\nGet the value of the specified `object` at the `key`, which may be an integer in the case of lists/arrays or strings in the case of maps/objects. E.g.:\n\n```js\nconst get = (object, key) =\u003e {\n  // must check type because some props may be immutable and others may not be\n  if (Immutable.Map.isMap(object) || Immutable.List.isList(object)) {\n    return object.get(key);\n  } else {\n    return object[key];\n  }\n}\n```\n\nThe default is:\n\n```js\nconst get = (object, key) =\u003e object[key];\n```\n\n### `toJson(object)`\n\nGet the deep value of the specified `object` as non-stringified JSON. E.g.:\n\n```js\nconst toJson = (object) =\u003e {\n  // must check type because some props may be immutable and others may not be\n  if (Immutable.isImmutable(object)) {\n    return object.toJSON();\n  } else {\n    return object;\n  }\n}\n```\n\nThe default is:\n\n```js\nconst toJson = (object) =\u003e object;\n```\n\n### `diff(objectA, objectB)`\n\nReturn whether the two objects have equal value. This is used to determine if and where Cytoscape needs to be patched. E.g.:\n\n```js\nconst diff = (objectA, objectB) =\u003e objectA !== objectB; // immutable creates new objects for each operation\n```\n\nThe default is a shallow equality check over the fields of each object. This means that if you use the default `diff()`, you should not use arrays or objects in an element's `data` or `scratch` fields.\n\nImmutable benefits performance here by reducing the total number of `diff()` calls needed. For example, an unchanged `element` requires only one diff with Immutable whereas it would require many diffs with the default JSON `diff()` implementation. Basically, Immutable make diffs minimal-depth searches.\n\n### `forEach(list, iterator)`\n\nCall `iterator` on each element in the `list`, in order. E.g.:\n\n```js\nconst forEach = (list, iterator) =\u003e list.forEach(iterator); // same for immutable and js arrays\n```\n\nThe above example is the same as the default `forEach()`.\n\n## Reference props\n\n### `cy()`\n\nThe `cy` prop allows for getting a reference to the `cy` Cytoscape object, e.g.:\n\n```jsx\n\u003cCytoscapeComponent cy={(cy) =\u003e { myCyRef = cy }} /\u003e\n```\n\n## Change log\n\n- v2.0.0\n  - BREAKING: Move `cytoscape` to peer dependencies for easier use in other packages. In particular, since you frequently need to explicitly call cytoscape functionality in your larger project, this helps ensure only one copy of it is loaded.\n  - Change from `webpack` to `microbundle` (`rollup` based)\n  - Update dependencies and lint configurations\n  - With thanks to @akx for the contribution\n- v1.2.1\n  - When patching, apply layout outside of batching.\n- v1.2.0\n  - Add support for `headless`, `styleEnabled` and the following (canvas renderer) rendering hints: `hideEdgesOnViewport`, `textureOnViewport`, `motionBlur`, `motionBlurOpacity`, `wheelSensitivity`, `pixelRatio`\n  - Add setup and version explanation to README\n  - Add a default React displayName\n- v1.1.0\n  - Add `Component.normalizeElements()` utility function\n  - Update style prop docs\n- v1.0.1\n  - Update style attribute in docs example to use idiomatic React style object\n  - Add npmignore\n- v1.0.0\n  - Initial release\n","funding_links":["https://plot.ly/products/consulting-and-oem/"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplotly%2Freact-cytoscapejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplotly%2Freact-cytoscapejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplotly%2Freact-cytoscapejs/lists"}