How to properly implement OrgChart in React/NextJS.

jrso15 commented 1 week ago

Hello,

I’m currently trying to implement OrgChart in d3-org-chart but I’m getting OrgChart is not a constructor. I can’t find any solution for this. can someone please help me?

Here’s sample of my code:

import React, { useRef } from "react";
import dynamic from "next/dynamic";
import styles from "@/styles/OrganizationChart.module.scss";

const OrgChart = dynamic(
  () =>
    import("d3-org-chart").then((mod) => {
      console.log(mod); 
      return mod.OrgChart;
    }),
  { ssr: false }
);

const OrganizationChart = ({ organizationItemData, onNodeClick }) => {
  const d3Container = useRef(null);
  const chartRef = useRef(null);

  // Initialize the chart directly in the render function if the container is ready
  if (organizationItemData && d3Container.current && !chartRef.current) {
    chartRef.current = new OrgChart(); // Adjust this based on the module structure

    chartRef.current
      .container(d3Container.current)
      .data(organizationItemData)
      .nodeWidth(() => 200)
      .nodeHeight(() => 120)
      .onNodeClick((d) => {
        console.log(d, "Id of clicked node ");
        onNodeClick(d);
      })
      .render();
  }

  return (
    <div className={styles.orgWrapper}>
      <div ref={d3Container} />
    </div>
  );
};

export default OrganizationChart;

Thanks in advance!