@react-sigma/core

React Sigma - core module

A set of react components to display graphs with Sigma.js.

Visit our website for docs and examples : https://sim51.github.io/react-sigma/

Documentation

• Getting started
• API reference
• Live examples

How to use it

1. Install the library

npm install @react-sigma/core

1. Import the React Sigma style file in your application. Example : import "@react-sigma/core/lib/react-sigma.min.css"

2. Create the following components into your app and check it displays correctly:

import Graph from "graphology";
import { SigmaContainer, useLoadGraph } from "@react-sigma/core";
import "@react-sigma/core/lib/react-sigma.min.css";

export const LoadGraph = () => {
  const graph = new Graph();
  graph.addNode("first", { size: 15, label: "My first node", color: "#FA4F40" });
  useLoadGraph(graph);
};

export const DisplayGraph = () => {
  return (
    <SigmaContainer style={{ height: "500px", width: "500px" }}>
      <LoadGraph />
    </SigmaContainer>
  );
};

Changelog

Version 4.0.3

• Upgrade to lastest beta of Sigma 3
• Review events definition in core, and adding missing Sigma events (like the resize one)