react-force-graph: four renderers behind one React interface

Four packages share one interface and differ only in renderer

The module exports four stand-alone React component packages with identical interfaces: react-force-graph-2d, react-force-graph-3d, react-force-graph-vr and react-force-graph-ar. Each represents a graph data structure in two or three dimensions using a force-directed iterative layout.

The renderers come from a separate family of libraries by the same author. force-graph draws on an HTML Canvas for the 2D case. 3d-force-graph uses ThreeJS and WebGL. 3d-force-graph-vr is built on A-Frame, and 3d-force-graph-ar is built on AR.js. This repository supplies the React bindings, so the rendering code itself lives in those four dependencies.

Identical interfaces have a practical consequence. A graph that starts in 2D can move to 3D by changing which package you import, and the props stay the same. The reverse does not hold for everything, since a prop about a camera or a mesh only makes sense where a camera or a mesh exists. The README points to a separate react-three-fiber component, r3f-forcegraph, for people who already work inside that renderer.

d3-force-3d is the physics engine behind all four

Layout uses d3-force-3d as the underlying physics engine, while canvas or WebGL handles drawing. A force-directed layout treats nodes as bodies and links as springs, and runs the simulation step by step until positions settle. That is the meaning of the project's phrase force-directed iterative layout: positions are computed over many ticks and not in one pass.

Because one engine serves all four packages, the 2D and 3D versions of a graph behave the same way and differ in the number of dimensions. The interactions are also shared: zooming and panning, node dragging, and hover and click on both nodes and links.

The visible text does not list the props, event names or force parameters. Those live in the documentation of the four renderer libraries that this module wraps, so expect to read force-graph or 3d-force-graph for the full prop list. The package.json here shows the wrapping layer: react-kapsule at ^2.6 and prop-types at 15 sit next to the four renderer dependencies.

The example folder doubles as the feature list

The README has no API table. It links a long list of live examples, each with a source link into the example folder, and those are the quickest way to see what a prop does.

Drawing options are covered by Basic, Directional arrows, Directional moving particles, Auto-colored nodes and links, 2D and 3D text nodes, Image nodes, HTML in nodes, Custom 2D node shapes, Custom 3D and VR node geometries, Curved lines and self links, and Text in links. Interaction is covered by Highlight nodes and links, Multiple node selection, Click to focus on node, Click to expand or collapse nodes, and Fix nodes after dragging. Data and camera handling appear as Dynamic data changes, Fit graph to canvas, Camera automatic orbitting, Node collision detection, Emit link particles on demand and Force-directed tree in DAG mode.

The example directory also holds all-modes, bloom-effect and datasets folders, plus a preview.png. The repository's primary language is reported as HTML, because the examples are standalone HTML pages. The homepage points at the Larger graph example.

AR and VR are separate packages with their own native requirements

Two of the four packages leave the browser window. The VR variant is built on A-Frame and the AR variant on AR.js, and the repository has an AR graph example under example/ar-graph. The visible text does not say which devices or browsers were tested, so try the example on your target hardware before building on it.

The cost of choosing them is a heavier dependency chain. In package.json, 3d-force-graph-vr is at ^3.1 and 3d-force-graph-ar is at ^1.10, while force-graph is at ^1.52 and 3d-force-graph is at ^1.80. All four sit under dependencies of the combined package, so installing the root name pulls every renderer family in one tree.

That matters for bundle size. The README shows a Build Size badge for each of the four packages, which suggests the single-purpose packages are the intended way to stay small. If you only need the 2D canvas, the react-force-graph-2d name avoids shipping ThreeJS to your users, because it is a separate package from the 3D one.

The root package is built as ESM with a UMD file for script tags

The root package.json is version 1.48.3, licensed MIT, with type set to module. Its main and module fields both point at dist/react-force-graph.mjs, and the types field points at dist/react-force-graph.d.ts, so TypeScript users get declarations from the same build. The exports map offers three entries: types, umd at ./dist/react-force-graph.min.js, and default at the mjs file. The unpkg and jsdelivr fields name the minified file, which lets you load it from a CDN with a script tag.

sideEffects is false, so bundlers may drop unused code. The peer dependency on react is the wildcard *, which means no minimum React version is enforced by the package. If a hook or concurrent-rendering issue appears, check which React version you installed, because the manifest will not stop you.

The build runs rimraf dist and then rollup -c. The dev script is rollup -w -c rollup.config.dev.js, and prepare runs the build, so installing from a git checkout builds the dist folder automatically. Only dist/**/* is published, as the files field shows.

Four renderers ship in the repository and no install command is shown

The README opens with npm, build size and download badges for all four variants, but the visible part contains no install command, no import line and no usage snippet. A reader gets a gallery of examples and a package list. To write code, open the matching example source and copy its imports and props.

The repository has no GitHub releases, so the version you see on npm is the only versioning signal. package.json is at 1.48.3, and the last push was on 2026-09-29. The repository is not archived. A rollup build with Babel 8 development dependencies is the toolchain visible in package.json.

This leaves one question the visible material does not answer: whether the root react-force-graph name or the four split names is the supported way to install. The README says the module exports four stand-alone packages, while the package.json here describes a single combined build. Check the npm page of the package you plan to use, and read the import in the example you copied, before you add it to a project.

Large graphs run on canvas or WebGL, and one example is the stress test

Rendering uses canvas or WebGL. The Larger graph example is the one the homepage links to, and it is the place to test your own node and link counts. The repository contains a datasets folder that supplies data for the examples.

HTML in nodes is the exception to know about. An example shows HTML content inside nodes, and any approach that puts DOM elements at each node trades away the main benefit of canvas, so try it with your real node count before committing. The README gives no figure for how many nodes each renderer handles, so the only evidence is the examples.

For dynamic data, the Dynamic data changes example shows updating the graph while it runs, and Fix nodes after dragging shows pinning a node where you dropped it. If your data changes every second, run the dynamic example against a similar feed first, because a simulation that restarts on every update can make nodes jump.

Editorial conclusion

Choose react-force-graph if you need a force-directed layout in React and may want the same data in 2D canvas, 3D WebGL, VR or AR without rewriting the component. Skip it if you need a node editor with draggable connectors, since the project describes an iterative layout renderer and nothing about editing. Before you adopt it, open the large-graph example with your own node count in mind and check which of the four packages you will import.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. Project website
4. README
5. vasturiano/react-force-graph on GitHub