React Templates & Themes Logo React Templates & Themes
React Force Graph screenshot

React Force Graph

Author Avatar Theme by Vasturiano
Updated: 21 Mar 2025
2558 Stars

React component for 2D, 3D, VR and AR force directed graphs

Github Live Preview

Overview:

The react-force-graph NPM package provides React bindings for the force-graph suite of components, including 2D HTML Canvas, ThreeJS/WebGL, A-Frame, and AR.js. It offers 4 React components: ForceGraph2D, ForceGraph3D, ForceGraphVR, and ForceGraphAR, each representing graph data structures in 2 or 3-dimensional spaces using force-directed iterative layout algorithms.

Features:

  • React Bindings: Provides React components for interacting with the force-graph components.
  • Rendering: Uses canvas/WebGL for rendering and d3-force-3d for the physics engine.
  • Interactions: Supports zooming, panning, node dragging, and node/link hover/click interactions.

Installation:

To install the react-force-graph NPM package, you can use npm or yarn:

npm install react-force-graph

or

yarn add react-force-graph

Summary:

The react-force-graph NPM package offers React developers an easy way to integrate interactive force-directed graphs in both 2D and 3D spaces. With support for various interactions, rendering technologies, and bindings to different force-graph components, it provides a versatile tool for visualizing graph data structures in a web application.