React Three Flow

A 3D customizable library powered by R3F and Tailwind CSS to create 3D flow diagrams.

Usage

Installation

The library is hosted on npm

npm i react-three-flow

Basic Usage

"use client";

import useStore from "@/store/store";
import React from "react";

import {ReactThreeFlowCanvas} from "react-three-flow"

const ThreeDCanvas: React.FC = () => {
  const onNodesChange = useStore((state) => state.onNodesChange);
  const nodes = useStore((state) => state.nodes);
  const edges = useStore((state) => state.edges);

  return (
    <ReactThreeFlowCanvas
      onNodesChange={onNodesChange}
      enableControls
      nodes={nodes}
      edges={edges}
    />
  );
};

export default ThreeDCanvas;

Adding callbacks

You can add callbacks for various event change.

Nodes updation require the onNodeChange callback which is of type onNodeChange provided by React Flow.

License

React Three Flow is MIT Licensed