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

Breaking changes

• CSS has been renamed style.css, so you must change import "@react-sigma/core/lib/style.css"; by import "@react-sigma/core/lib/react-sigma.min.css";. Now the rollup config is shared, and for each module that export a css file, it will be named style.css.
• SearchControl in core has been removed. A new module called graph-search replace it.

Features

• Upgrade to the latest stable release of Sigma (ie. 3.0.0)
• Upgrade all librairies to their latest version
• Adding minimap module
• Adding graph-search module
• Upgrade all project dependencies
• Review prettier configuration
• Sharing rollup configuration across modules