@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 example

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 3.1.0

Fixes

• #38 Adding mousemovebody to useRegisterEvents (thanks jakobhansen-blai !)

Features

• Upgrade to sigma@2.4.0
• Upgrade to graphology-layout-forceatlas2@0.10.1
• #30 : Forward the sigma ref on the SigmaContainer