Broken example in the setup documentation

[emileber]

Someone asked on Stack Overflow about a simple detail in the setup documentation, and while trying to get it to work on my side, I figured that the documented example doesn't work out of the box.

To make it work, I needed to install a couple more dependencies then documented:

• lodash
• graphology-types

And I needed to update the code to the following:

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

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

    graph.addNode("first", {
      // Missing 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;
};

I'm not even sure it's the best way to use react-sigma as I've never used it before, though the hello world style example is definitely broken.

[sim51]

I updated the doc following your advice.
I also added a link to code sandbox.

I hope it will help beginner user to use the lib.

Thanks a lot !

[emileber]

It looks like the required coordinates are still missing and the wrong function is used to load the graph inside the effect.

  useEffect(() => {
    const graph = new Graph();

    // Missing the x and y options
    graph.addNode("first", { size: 15, label: "My first node", color: "#FA4F40" });

    // This should be "loadGraph", since useLoadGraph is the hook and it is an invalid usage to have it here
    useLoadGraph(graph);
  }, [loadGraph]);

[emileber]

Looks great, I'm going to close my issue as it's no longer relevant. Thanks! 🎉