Hook & OrgChartProvider

Through the useOrgChartContext hook, users gain access to the organization chart model, allowing them to utilize its functions for further customization of the interaction with the organization chart.

This hook is accessible only when used in a child component of an OrgChartProvider. This condition is consistently met when implementing child components for the OrgChartItem component. However, if the hook is called outside the organization chart component, the OrgChartProvider must be a common ancestor.

The following example demonstrates how to use the hook for a button in a sidebar or a customized context menu.

function OrgChartWrapper() { const { fitContent, zoomToItem, zoomToOriginal } = useOrgChartContext()! return ( <> <OrgChart data={data} contextMenuItems={(item: CustomOrgChartItem | null) => item ? [{ title: 'Zoom to Item', action: () => zoomToItem(item) }] : []} ></OrgChart> <div className="toolbar"> <button className="toolbar-button" onClick={fitContent}>Fit Content</button> <button className="toolbar-button" onClick={zoomToOriginal}>Zoom 1:1</button> </div> </> ) } function App() { return ( <OrgChartProvider> <OrgChartWrapper></OrgChartWrapper> </OrgChartProvider> ) } [ { position: 'Chief Executive Officer', name: 'Eric Joplin', email: 'ejoplin@yoyodyne.com', phone: '555-0100', fax: '555-0101', businessUnit: 'Executive Unit', status: 'present', subordinates: [1, 2, 3, 4, 5, 6], id: 0 }, { position: 'Chief Executive Assistant', name: 'Gary Roberts', email: 'groberts@yoyodyne.com', phone: '555-0100', fax: '555-0101', businessUnit: 'Executive Unit', status: 'present', assistant: true, subordinates: [70, 71], id: 1 }, { position: 'Vice President of Production', name: 'Amy Kain', email: 'akain@yoyodyne.com', phone: '555-0106', fax: '555-0107', businessUnit: 'Production', status: 'unavailable', subordinates: [55, 56, 57, 58, 59], id: 2 }, { position: 'Vice President of Sales', name: 'Richard Fuller', email: 'rfuller@yoyodyne.com', phone: '555-0134', fax: '555-0135', businessUnit: 'Sales', status: 'present', subordinates: [49, 50], id: 3 }, { position: 'Vice President of Engineering', name: 'Mildred Shark', email: 'mshark@yoyodyne.com', phone: '555-0156', fax: '555-0157', businessUnit: 'Engineering', status: 'present', subordinates: [21], id: 4 }, { position: 'Marketing Manager', name: 'Angela Haase', email: 'ahaase@yoyodyne.com', phone: '555-0170', fax: '555-0171', businessUnit: 'Marketing', status: 'present', subordinates: [19, 20], id: 5 }, { position: 'Chief Financial Officer', name: 'David Kerry', email: 'dkerry@yoyodyne.com', phone: '555-0180', fax: '555-0181', businessUnit: 'Accounting', status: 'present', subordinates: [7, 8, 9], id: 6 }, { position: 'Accounts Manager', name: 'Walter Hastings', email: 'whastings@yoyodyne.com', phone: '555-0182', fax: '555-0183', businessUnit: 'Accounting', status: 'present', subordinates: [16, 17, 18], id: 7 }, { position: 'Finance Manager', name: 'Joy Medico', email: 'jmedico@yoyodyne.com', phone: '555-0190', fax: '555-0191', businessUnit: 'Accounting', status: 'present', subordinates: [13, 14, 15], id: 8 }, { position: 'Human Resource Manager', name: 'Danny Welch', email: 'dwelch@yoyodyne.com', phone: '555-0198', fax: '555-0199', businessUnit: 'Accounting', status: 'present', subordinates: [10, 11, 12], id: 9 }, { position: 'Human Resource Administrative Assistant', name: 'Leroy Vison', email: 'lvison@yoyodyne.com', phone: '555-0200', fax: '555-0201', businessUnit: 'Accounting', status: 'present', assistant: true, id: 10 }, { position: 'Benefits Specialist', name: 'Mark Parks', email: 'mparks@yoyodyne.com', phone: '555-0202', fax: '555-0203', businessUnit: 'Accounting', status: 'present', id: 11 }, { position: 'Recruiter', name: 'Linda Lenhart', email: 'llenhart@yoyodyne.com', phone: '555-0204', fax: '555-0205', businessUnit: 'Accounting', status: 'busy', id: 12 }, { position: 'Purchasing Manager', name: 'Edward Lewis', email: 'elewis@yoyodyne.com', phone: '555-0192', fax: '555-0193', businessUnit: 'Accounting', status: 'unavailable', id: 13 }, { position: 'Purchasing Assistant', name: 'Mildred Bean', email: 'mbean@yoyodyne.com', phone: '555-0194', fax: '555-0195', businessUnit: 'Accounting', status: 'busy', assistant: true, id: 14 }, { position: 'Buyer', name: 'Raymond Lindley', email: 'rlindley@yoyodyne.com', phone: '555-0196', fax: '555-0197', businessUnit: 'Accounting', status: 'present', id: 15 }, { position: 'Accounts Receivable Specialist', name: 'Susan Moran', email: 'smoran@yoyodyne.com', phone: '555-0184', fax: '555-0185', businessUnit: 'Accounting', status: 'present', id: 16 }, { position: 'Accountant', name: 'Melvin Cruz', email: 'mcruz@yoyodyne.com', phone: '555-0186', fax: '555-0187', businessUnit: 'Accounting', status: 'present', id: 17 }, { position: 'Accounts Payable Specialist', name: 'Rachel King', email: 'rking@yoyodyne.com', phone: '555-0188', fax: '555-0189', businessUnit: 'Accounting', status: 'present', id: 18 }, { position: 'Marketing Specialist', name: 'Jermaine Stewart', email: 'jstewart@yoyodyne.com', phone: '555-0172', fax: '555-0173', businessUnit: 'Marketing', status: 'present', id: 19 }, { position: 'Marketing Assistant', name: 'Lorraine Deaton', email: 'ldeaton@yoyodyne.com', phone: '555-0174', fax: '555-0175', businessUnit: 'Marketing', status: 'present', assistant: true, id: 20 }, { position: 'Engineering Manager', name: 'Martha Barnes', email: 'mbarnes@yoyodyne.com', phone: '555-0158', fax: '555-0159', businessUnit: 'Engineering', status: 'busy', subordinates: [22, 23, 24], id: 21 }, { position: 'Senior Tool Designer', name: 'Maria Dossantos', email: 'mdossantos@yoyodyne.com', phone: '555-0160', fax: '555-0161', businessUnit: 'Engineering', status: 'present', subordinates: [43, 44, 45, 46, 47, 48], id: 22 }, { position: 'Senior Design Engineer', name: 'Laurie Aitken', email: 'laitken@yoyodyne.com', phone: '555-0164', fax: '555-0165', businessUnit: 'Engineering', status: 'present', subordinates: [38, 39, 40, 41, 42], id: 23 }, { position: 'R & D Manager', name: 'John Payne', email: 'jpayne@yoyodyne.com', phone: '555-0168', fax: '555-0169', businessUnit: 'Engineering', status: 'present', subordinates: [25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37], id: 24 }, { position: 'R & D Engineer', name: 'Rana Oxborough', email: 'roxborough@yoyodyne.com', phone: '555-0176', fax: '555-0177', businessUnit: 'Engineering', status: 'present', id: 25 }, { position: 'R & D Engineer', name: 'Gary Olsen', email: 'golsen@yoyodyne.com', phone: '555-0178', fax: '555-0179', businessUnit: 'Engineering', status: 'present', id: 26 }, { position: 'R & D Engineer', name: 'Matthew Finney', email: 'mfinney@yoyodyne.com', phone: '555-0206', fax: '555-0207', businessUnit: 'Engineering', status: 'travel', id: 27 }, { position: 'R & D Engineer', name: 'Julius Kelly', email: 'jkelly@yoyodyne.com', phone: '555-0208', fax: '555-0209', businessUnit: 'Engineering', status: 'present', id: 28 }, { position: 'R & D Engineer', name: 'Charles Wylam', email: 'cwylam@yoyodyne.com', phone: '555-0212', fax: '555-0213', businessUnit: 'Engineering', status: 'present', id: 29 }, { position: 'R & D Engineer', name: 'Steven Dotter', email: 'sdotter@yoyodyne.com', phone: '555-0214', fax: '555-0215', businessUnit: 'Engineering', status: 'busy', id: 30 }, { position: 'R & D Engineer', name: 'Richard Bradshaw', email: 'rbradshaw@yoyodyne.com', phone: '555-0216', fax: '555-0217', businessUnit: 'Engineering', status: 'unavailable', id: 31 }, { position: 'R & D Engineer', name: 'Vera Shoe', email: 'vshoe@yoyodyne.com', phone: '555-0218', fax: '555-0219', businessUnit: 'Engineering', status: 'present', id: 32 }, { position: 'R & D Engineer', name: 'Marty Tucker', email: 'mtucker@yoyodyne.com', phone: '555-0230', fax: '555-0231', businessUnit: 'Engineering', status: 'present', id: 33 }, { position: 'R & D Engineer', name: 'Dennis Long', email: 'dlong@yoyodyne.com', phone: '555-0232', fax: '555-0233', businessUnit: 'Engineering', status: 'present', id: 34 }, { position: 'R & D Engineer', name: 'Anthony Rice', email: 'arice@yoyodyne.com', phone: '555-0222', fax: '555-0223', businessUnit: 'Engineering', status: 'busy', id: 35 }, { position: 'R & D Engineer', name: 'Joseph Lewis', email: 'jlewis@yoyodyne.com', phone: '555-0224', fax: '555-0225', businessUnit: 'Engineering', status: 'present', id: 36 }, { position: 'R & D Engineer', name: 'Susan Reid', email: 'sreid@yoyodyne.com', phone: '555-0226', fax: '555-0227', businessUnit: 'Engineering', status: 'present', id: 37 }, { position: 'Design Engineer', name: 'Carla Clark', email: 'cclark@yoyodyne.com', phone: '555-0242', fax: '555-0243', businessUnit: 'Engineering', status: 'unavailable', id: 38 }, { position: 'Design Engineer', name: 'Cynthia Judd', email: 'cjudd@yoyodyne.com', phone: '555-0244', fax: '555-0245', businessUnit: 'Engineering', status: 'unavailable', id: 39 }, { position: 'Design Engineer', name: 'Robert Finn', email: 'rfinn@yoyodyne.com', phone: '555-0246', fax: '555-0247', businessUnit: 'Engineering', status: 'present', id: 40 }, { position: 'Design Engineer', name: 'Willie Schaub', email: 'wschaub@yoyodyne.com', phone: '555-0248', fax: '555-0249', businessUnit: 'Engineering', status: 'present', id: 41 }, { position: 'Design Engineer', name: 'Edwin Nagy', email: 'enagy@yoyodyne.com', phone: '555-0166', fax: '555-0167', businessUnit: 'Engineering', status: 'present', id: 42 }, { position: 'Tool Designer', name: 'Hector Donald', email: 'hdonald@yoyodyne.com', phone: '555-0162', fax: '555-0163', businessUnit: 'Engineering', status: 'busy', id: 43 }, { position: 'Tool Designer', name: 'Michelle Douglas', email: 'mdouglas@yoyodyne.com', phone: '555-0228', fax: '555-0229', businessUnit: 'Engineering', status: 'present', id: 44 }, { position: 'Tool Designer', name: 'Bonnie Penney', email: 'bpenney@yoyodyne.com', phone: '555-0234', fax: '555-0235', businessUnit: 'Engineering', status: 'present', id: 45 }, { position: 'Tool Designer', name: 'Francis Webster', email: 'fwebster@yoyodyne.com', phone: '555-0236', fax: '555-0237', businessUnit: 'Engineering', status: 'present', id: 46 }, { position: 'Tool Designer', name: 'Gregory Arnold', email: 'garnold@yoyodyne.com', phone: '555-0238', fax: '555-0239', businessUnit: 'Engineering', status: 'present', id: 47 }, { position: 'Tool Designer', name: 'Ken Kowalski', email: 'kkowalski@yoyodyne.com', phone: '555-0240', fax: '555-0241', businessUnit: 'Engineering', status: 'present', id: 48 }, { position: 'North America Sales Manager', name: 'Joe Vargas', email: 'jvargas@yoyodyne.com', phone: '555-0136', fax: '555-0137', businessUnit: 'Sales', status: 'present', subordinates: [53, 54], id: 49 }, { position: 'European Sales Manager', name: 'Robert Hartman', email: 'rhartman@yoyodyne.com', phone: '555-0138', fax: '555-0139', businessUnit: 'Sales', status: 'present', subordinates: [51, 52], id: 50 }, { position: 'Sales Representative', name: 'Rebecca Polite', email: 'rpolite@yoyodyne.com', phone: '555-0148', fax: '555-0149', businessUnit: 'Sales', status: 'travel', id: 51 }, { position: 'Sales Representative', name: 'Michael Daniels', email: 'mdaniels@yoyodyne.com', phone: '555-0154', fax: '555-0155', businessUnit: 'Sales', status: 'travel', id: 52 }, { position: 'Sales Representative', name: 'Robert Parson', email: 'rparson@yoyodyne.com', phone: '555-0150', fax: '555-0151', businessUnit: 'Sales', status: 'travel', id: 53 }, { position: 'Sales Representative', name: 'Melissa Noren', email: 'mnoren@yoyodyne.com', phone: '555-0152', fax: '555-0153', businessUnit: 'Sales', status: 'present', id: 54 }, { position: 'Quality Assurance Manager', name: 'Dorothy Turner', email: 'dturner@yoyodyne.com', phone: '555-0108', fax: '555-0109', businessUnit: 'Production', status: 'unavailable', subordinates: [65, 66], id: 55 }, { position: 'Master Scheduler', name: 'Larry Littlefield', email: 'llittlefield@yoyodyne.com', phone: '555-0126', fax: '555-0127', businessUnit: 'Production', status: 'present', id: 56 }, { position: 'Facilities Manager', name: 'Anne Binger', email: 'abinger@yoyodyne.com', phone: '555-0122', fax: '555-0123', businessUnit: 'Production', status: 'present', subordinates: [62], id: 57 }, { position: 'Shipping and Receiving Supervisor', name: 'Ray Hammond', email: 'rhammond@yoyodyne.com', phone: '555-0146', fax: '555-0147', businessUnit: 'Production', status: 'travel', subordinates: [60, 61], id: 58 }, { position: 'Production Supervisor', name: 'Kathy Maxwell', email: 'kmaxwell@yoyodyne.com', phone: '555-0132', fax: '555-0133', businessUnit: 'Production', status: 'present', id: 59 }, { position: 'Shipping and Receiving Clerk', name: 'Bob Lacey', email: 'blacey@yoyodyne.com', phone: '555-0124', fax: '555-0125', businessUnit: 'Production', status: 'travel', id: 60 }, { position: 'Stocker', name: 'Ronnie Garcia', email: 'rgarcia@yoyodyne.com', phone: '555-0130', fax: '555-0131', businessUnit: 'Production', status: 'present', id: 61 }, { position: 'Facilities Administrative Assistant', name: 'Timothy Jackson', email: 'tjackson@yoyodyne.com', phone: '555-0140', fax: '555-0141', businessUnit: 'Production', status: 'busy', subordinates: [63, 64], id: 62 }, { position: 'Maintenance Supervisor', name: 'Carmen Shortened', email: 'cshortened@yoyodyne.com', phone: '555-0142', fax: '555-0143', businessUnit: 'Production', status: 'present', id: 63 }, { position: 'Janitor', name: 'Thomas Stark', email: 'tstark@yoyodyne.com', phone: '555-0144', fax: '555-0145', businessUnit: 'Production', status: 'present', id: 64 }, { position: 'Quality Assurance Supervisor', name: 'Valerie Burnett', email: 'vburnett@yoyodyne.com', phone: '555-0110', fax: '555-0111', businessUnit: 'Production', status: 'present', subordinates: [69], id: 65 }, { position: 'Document Control Manager', name: 'Edward Monge', email: 'emonge@yoyodyne.com', phone: '555-0118', fax: '555-0119', businessUnit: 'Production', status: 'present', subordinates: [67, 68], id: 66 }, { position: 'Control Specialist', name: 'Howard Meyer', email: 'hmeyer@yoyodyne.com', phone: '555-0116', fax: '555-0117', businessUnit: 'Production', status: 'present', id: 67 }, { position: 'Document Control Assistant', name: 'Lisa Jensen', email: 'ljensen@yoyodyne.com', phone: '555-0120', fax: '555-0121', businessUnit: 'Production', status: 'travel', assistant: true, id: 68 }, { position: 'Quality Assurance Technician', name: 'Martin Cornett', email: 'mcornett@yoyodyne.com', phone: '555-0114', fax: '555-0115', businessUnit: 'Production', status: 'present', id: 69 }, { position: 'Senior Executive Assistant', name: 'Alexander Burns', email: 'aburns@yoyodyne.com', phone: '555-0102', fax: '555-0103', businessUnit: 'Executive Unit', status: 'present', id: 70 }, { position: 'Junior Executive Assistant', name: 'Linda Newland', email: 'lnewland@yoyodyne.com', phone: '555-0112', fax: '555-0113', businessUnit: 'Executive Unit', status: 'present', id: 71 } ] .toolbar { position: absolute; top: 20px; left: 20px; background-color: #393939; border-radius: 10px; padding: 5px; } .toolbar-button { outline: none; border: none; background-color: #393939; color: white; cursor: pointer; transition: background-color 0.3s ease 0s, border-color 0.3s ease 0s; font-size: 16px; padding: 0.5rem 1.2rem 0.5rem 0.8rem; border-radius: 10px; } .toolbar-button:hover { background-color: #2b2b2b; }