The react-force-graph repository provides React components for visualizing network graphs in 2D, 3D, VR, and AR environments. The project exports four separate npm packages with identical interfaces: react-force-graph-2d, react-force-graph-3d, react-force-graph-vr, and react-force-graph-ar. Each component represents graph data structures using force-directed iterative layout algorithms, enabling interactive visualization of nodes and links in different dimensional spaces and immersive contexts.
The library uses canvas and WebGL for rendering performance and leverages d3-force-3d as its underlying physics engine for calculating node positions and forces. All four components support core interaction features including zooming, panning, node dragging, and hover or click interactions on both nodes and links. The rendering approach differs by component type: the 2D version uses HTML Canvas, the 3D version uses ThreeJS and WebGL, the VR version uses A-Frame, and the AR version uses AR.js technology.
The repository demonstrates extensive customization capabilities through its example collection. Available examples showcase directional links with arrows or moving particles, auto-colored nodes and links, text nodes in both 2D and 3D contexts, image nodes, HTML content within nodes, custom node shapes and geometries, curved lines and self-referential links, text labels on links, node and link highlighting, multiple node selection, dynamic data updates, camera controls including automatic orbiting, node collision detection, particle emission on links, force-directed tree layouts in DAG mode, and post-processing effects like bloom. The large-graph example demonstrates the component's capability to handle substantial datasets efficiently.
According to GitGenius activity tracking, the repository has received consistent maintenance with a median issue and pull request response latency of 9.7 hours across 84 tracked items. The primary maintainer vasturiano has logged 103 events, with secondary contributors SilvaLucas92 recording 17 events and benjamin-r-holmes contributing 6 events. The project shares contributors with major repositories including meteor/meteor, mui/material-ui, and microsoft/vscode, indicating its integration into broader development ecosystems.
The API design provides flexible data input through graphData objects containing nodes and arrays, with configurable accessor attributes for node IDs and link source-target relationships. The component accepts standard graph data structures where nodes and links are defined separately, allowing developers to customize which object properties map to the component's internal requirements. This flexibility enables integration with various data formats and sources.
The project includes comprehensive documentation with quick-start instructions for both npm package installation and script tag inclusion. The homepage at vasturiano.github.io/react-force-graph/example/large-graph/ provides a live demonstration of the library's capabilities. The repository also references a related react-three-fiber component variant for developers preferring that rendering approach. The inclusion of a donation link indicates the maintainer's commitment to sustaining the project as open-source software.
