React organogram
React organogram working example on codesandbox.
Organogram component
import { useRef, useEffect } from "react"; import organogram from "@jsuites/organogram"; import "@jsuites/organogram/organogram.css"; export default function Organogram({ options }) { const organogramRef = useRef(null); const jsuitesOrganogram = useRef(null); useEffect(() => { organogram(organogramRef.current, options); }, [options]); return <div ref={organogramRef} />; }
Component usage
import Organogram from "./Organogram"; export default function App() { return ( <> <h3>Organogram example:</h3> <Organogram options={{ width: 600, height: 300, zoom: 0.2, data: [ { id: 1, name: "Jorge", role: "CEO", parent: 0, color: "#90EE90" }, { id: 2, name: "Antonio", role: "Vice president", parent: 1, color: "#90EE90" }, { id: 3, name: "Manoel", role: "Production manager", parent: 1, color: "#D3D3D3" }, { id: 4, name: "Pedro", role: "Intern", parent: 3, color: "#90EE90" }, { id: 5, name: "Carlos", role: "Intern", parent: 3, color: "#90EE90" }, { id: 6, name: "Marcos", role: "Marketing manager", parent: 2, color: "#D3D3D3" }, { id: 7, name: "Ana", role: "Sales manager", parent: 2, color: "#90EE90" }, { id: 8, name: "Nicolly", role: "Operations manager", parent: 2, color: "#D3D3D3" }, { id: 9, name: "Paulo", role: "Sales assistant", parent: 7, color: "#90EE90" }, { id: 10, name: "Iris", role: "Sales assistant", parent: 7, color: "#90EE90" } ] }} /> </> ); }
Note: It is necessary to maintain a link in index.html or some other method to use material design icons, such as the following link:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />