What is the React Sigma style file mentioned in their setup documentation?

Question

This is my first time making graphs in React so I'm following the guide and documentation. I have no prior experience with graphology, sigma.js or react-sigma (I know how to use normal React).

The setup documentation says:

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

What are style files? CSS? How can I make one? I can't find any documentation. Is it something basic from a previous library?

Honestly I'm finding it very hard to learn sigma.js and insert it in my react website. I can't find any guides. Are there any? I just want to start with a simple graph and learn from there.

Answer 1

The documentation refers specifically to their own CSS file which must be imported in a React app like they are showing in the example:

import "@react-sigma/core/lib/react-sigma.min.css";

Disclaimer: depending on your React app setup, the way to import a CSS file might differ.

---

The example in the documentation was broken when I wrote this answer. I opened an issue on the react-sigma repo and it was fixed since then.

When I tried it, some dependencies were missing and some changes were needed.

npm install @react-sigma/core sigma graphology graphology-types lodash 

import { useEffect } from "react";
import Graph from "graphology";
import { SigmaContainer, useLoadGraph } from "@react-sigma/core";

// Import the style file here
import "@react-sigma/core/lib/react-sigma.min.css";

export const LoadGraph = () => {
  // first change to their example
  const loadGraph = useLoadGraph();

  // also wrapped their graph instantiation side-effect with useEffect
  useEffect(() => {
    const graph = new Graph();

    graph.addNode("first", {
      // Required position
      x: 1,
      y: 1,

      size: 15,
      label: "My first node",
      color: "#FA4F40"
    });

    // Calling the function that was missing from the example
    loadGraph(graph);
  }, [loadGraph]);

  // Returning null to get a valid component
  return null;
};

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

Note that I used TypeScript for the example, which gives insightful error messages since react-sigma provides its own types.

Then it was clear that the useLoadGraph hook wasn't used properly since it doesn't accept any parameter and it returns a function accepting a graph parameter. This can be confirmed with the API documentation.

I also figured that lodash was missing from errors in the developer console.

---

Please refer to the documentation as it's now up-to-date.