{"id":13421944,"url":"https://github.com/dunnock/react-sigma","last_synced_at":"2025-04-04T10:05:09.278Z","repository":{"id":38745087,"uuid":"75478496","full_name":"dunnock/react-sigma","owner":"dunnock","description":"Lightweight React library for drawing network graphs built on top of SigmaJS","archived":false,"fork":false,"pushed_at":"2023-01-04T21:36:44.000Z","size":8392,"stargazers_count":262,"open_issues_count":62,"forks_count":43,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-28T09:04:37.851Z","etag":null,"topics":["hacktoberfest","jsx","react","svg","webgl","webpack"],"latest_commit_sha":null,"homepage":"https://dunnock.github.io/react-sigma/","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/dunnock.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","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":"2016-12-03T14:28:25.000Z","updated_at":"2025-03-02T17:28:57.000Z","dependencies_parsed_at":"2023-02-02T20:46:09.965Z","dependency_job_id":null,"html_url":"https://github.com/dunnock/react-sigma","commit_stats":null,"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dunnock%2Freact-sigma","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dunnock%2Freact-sigma/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dunnock%2Freact-sigma/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dunnock%2Freact-sigma/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dunnock","download_url":"https://codeload.github.com/dunnock/react-sigma/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247156308,"owners_count":20893197,"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":["hacktoberfest","jsx","react","svg","webgl","webpack"],"created_at":"2024-07-30T23:00:34.290Z","updated_at":"2025-04-04T10:05:09.248Z","avatar_url":"https://github.com/dunnock.png","language":"JavaScript","readme":"[![npm version][img-1]][1]\n[![Build Status][img-2]][2]\n\n[img-1]: https://img.shields.io/npm/v/react-sigma.svg\n[img-2]: https://travis-ci.org/dunnock/react-sigma.svg?branch=master\n\n[1]: https://www.npmjs.com/package/react-sigma \"npm version\"\n[2]: https://travis-ci.org/dunnock/react-sigma\n\nIt makes easy to publish networks on Web pages and allows developers to integrate network exploration in rich Web applications. Use JSX for graph configuration, including asynchronous graph loading. Library is lightweight and modular, so you can bundle only what you use. Easy to extend with additional components.\n\n## Table of Contents\n\n- [Usage](#usage)\n- [Components reference](#components-reference)\n - [Sigma](#sigma)\n - [SigmaEnableWebGL](#sigmaenablewebgl)\n - [Extending sigma components](#extending-sigma-components)\n - [Components composition](#components-composition)\n- [Types](#types)\n\n# Usage\n\nSee [storybook for working examples](https://dunnock.github.io/react-sigma/).\n\nPlease make sure to read [CONTRIBUTION prerequisites section](https://github.com/dunnock/react-sigma/blob/master/CONTRIBUTION.md#prerequisites) if you want to fork \u0026 change or contribute.\n\n## Install\n\n`npm install --save react-sigma`\n\nor\n\n`yarn add react-sigma`\n\nor\n\n`bower install https://unpkg.com/react-sigma@1.2/dist/react-sigma.min.js`\n\nIf you don't want to use webpack or browserify, you could always reference the\nsingle file distribution, library will be available under global var ReactSigma:\n\n`\u003cscript src=\"https://unpkg.com/react-sigma@1.2/dist/react-sigma.min.js\"/\u003e`\n\n## Simple use case with embedded graph\n\n```\nimport {Sigma, RandomizeNodePositions, RelativeSize} from 'react-sigma';\n...\nlet myGraph = {nodes:[{id:\"n1\", label:\"Alice\"}, {id:\"n2\", label:\"Rabbit\"}], edges:[{id:\"e1\",source:\"n1\",target:\"n2\",label:\"SEES\"}]};\n...\n\u003cSigma graph={myGraph} settings={{drawEdges: true, clone: false}}\u003e\n  \u003cRelativeSize initialSize={15}/\u003e\n  \u003cRandomizeNodePositions/\u003e\n\u003c/Sigma\u003e\n```\nNote that graph nodes require x, y and size defined in order to be displayed, [plugins like RelativeSize and RandomizeNodePositions might help to generate those](https://github.com/dunnock/react-sigma/blob/master/DOCS.md#nodes-distribution). Sigma updates graph positions, therefore if to keep track of nodes in this example we use \n`\u003cSigma settings={{clone: false}}\u003e`\n\n## Simple use case with graph loaded from external file\n\n```\nimport {Sigma, LoadJSON} from 'react-sigma'\n...\n\u003cSigma style={{width:\"200px\", height:\"200px\"}}\u003e\n  \u003cLoadJSON path=\"/public/data.json\" /\u003e\n\u003c/Sigma\u003e\n```\n\n## Advanced use case\n```\n...\n\u003cSigma renderer=\"canvas\"\u003e\n\t\u003cEdgeShapes default=\"tapered\"/\u003e\n\t\u003cNodeShapes default=\"star\"/\u003e\n\t\u003cLoadGEXF path={String(process.env.PUBLIC_URL) + \"/arctic.gexf\"}\u003e\n\t\t\u003cFilter neighborsOf={ this.state.filterNeighbours } /\u003e\n\t\t\u003cForceAtlas2 worker barnesHutOptimize barnesHutTheta={0.6} iterationsPerRender={10} linLogMode timeout={3000}/\u003e\n\t\t\u003cRelativeSize initialSize={15}/\u003e\n\t\u003c/LoadGEXF\u003e\n\u003c/Sigma\u003e\n```\n\n# Components reference\n\nPlease see [react-sigma reference](https://github.com/dunnock/react-sigma/blob/master/DOCS.md) for details. Below is a brief concept.\n\n## Sigma\n\nSigma is the main component which reserves \u003cdiv\u003e area with a given style (default is full width, 500px height),\ninitializes renderer and camera in the given area and starts rendering graph.\n\u003cSigma\u003e be composed with sigma plugins using JSX syntax, e.g.:\n\n```\n\u003cSigma renderer=\"webgl\" style={{maxWidth:\"inherit\", height:\"400px\"}}\n\t\tsettings={{drawEdges:false}}\n\t\tonOverNode={e =\u003e console.log(\"Mouse over node: \" + e.data.node.label)}\n\t\tgraph={{nodes:[\"id0\", \"id1\"], edges:[{id:\"e0\",source:\"id0\",target:\"id1\"}]}}\u003e\n\t\u003cRelativeSize initialSize={8} /\u003e\n\u003c/Sigma\u003e\n```\n\n## SigmaEnableWebGL\n\nBy default sigma package includes only canvas rendering functions with webpack2, though it can be easily extended with WebGL or SVG (see next topic). Importing SigmaEnableWebGL enables WebGL renderer, setting it as default renderer if WebGL is supported by browser. \n\n```\nimport { Sigma, SigmaEnableWebGL } from 'react-sigma'\n...\n\u003cSigma /\u003e // will use webgl renderer if supported by browser\n```\n\n## SigmaEnableSVG\n\nSigma can be easily extended with SVG renderer. Importing SigmaEnableSVG enables SVG renderer, though it does not set it as default so renderer should be explicitly specified in sigma options. \n\n```\nimport { Sigma, SigmaEnableSVG } from 'react-sigma'\n...\n\u003cSigma renderer=\"svg\" /\u003e \n```\n\n## Extending sigma components\n\nSigma container will mount any child component with sigma instance under props.sigma. This way you can write custom sigma-aware components:\n\n```\nclass MyCustomSigma extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props)\n\t\tprops.sigma.graph.addNode({id:\"n3\", label:props.label})\n\t}\n}\n...\nreturn  \u003cSigma\u003e\n\t\u003cMyCustomSigma label=\"Label\"\u003e\n\u003c/Sigma\u003e\n```\n\n## Components composition\n\nComponent which initialize or provide graph changes asynchronously are supposed to mount children\nafter initialized. For instance LoadJSON will render child subcomponents only after loading. This makes possible to build sequential composition in the pure JSX without any callbacks or handlers. In the following example RelativeSize will be instantiated only after loading from arctic.json file.\n\n\n```\n\u003cSigma\u003e\n\t\u003cLoadJSON url=\"/arctic.json\"\u003e\n\t\t\u003cRelativeSize initialSize={8}/\u003e\n\t\u003c/LoadJSON\u003e\n\u003c/Sigma\u003e\n```\n\n# Types\n\nAll defined Sigma types stored under /types/sigma.js, can be used as a reference for objects and parameters.\nTODO: move to flow-typed\n\n# Attributions\n\n - this project is a React wrapper around excellent [Sigma.JS](https://github.com/jacomyal/sigma.js) library built by @jacomyal and @Yomguithereal\n","funding_links":[],"categories":["UI Components","JavaScript","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Chart","Data Visualization"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdunnock%2Freact-sigma","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdunnock%2Freact-sigma","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdunnock%2Freact-sigma/lists"}