{"id":28436364,"url":"https://github.com/yworks/react-yfiles-orgchart","last_synced_at":"2025-06-27T18:31:20.855Z","repository":{"id":222664114,"uuid":"757915846","full_name":"yWorks/react-yfiles-orgchart","owner":"yWorks","description":"yFiles React Organization Chart Component - A powerful and versatile React component based on the yFiles library, allows you to seamlessly incorporate dynamic and interactive organization charts into your applications.","archived":false,"fork":false,"pushed_at":"2025-03-27T08:11:13.000Z","size":4567,"stargazers_count":19,"open_issues_count":1,"forks_count":1,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-05-31T06:52:58.992Z","etag":null,"topics":["component-library","diagramming","orgchart","react"],"latest_commit_sha":null,"homepage":"https://docs.yworks.com/react-yfiles-orgchart/introduction/welcome","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yWorks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-15T08:53:11.000Z","updated_at":"2025-04-08T16:09:01.000Z","dependencies_parsed_at":"2024-04-23T11:13:06.331Z","dependency_job_id":"63e35258-2243-41cd-8a5e-c56084cceb9a","html_url":"https://github.com/yWorks/react-yfiles-orgchart","commit_stats":null,"previous_names":["yworks/react-yfiles-orgchart"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/yWorks/react-yfiles-orgchart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yWorks%2Freact-yfiles-orgchart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yWorks%2Freact-yfiles-orgchart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yWorks%2Freact-yfiles-orgchart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yWorks%2Freact-yfiles-orgchart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yWorks","download_url":"https://codeload.github.com/yWorks/react-yfiles-orgchart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yWorks%2Freact-yfiles-orgchart/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262310793,"owners_count":23291622,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","diagramming","orgchart","react"],"created_at":"2025-06-05T22:08:30.678Z","updated_at":"2025-06-27T18:31:20.822Z","avatar_url":"https://github.com/yWorks.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# yFiles React Organization Chart Component\n\n[![NPM version](https://img.shields.io/npm/v/@yworks/react-yfiles-orgchart?style=flat)](https://www.npmjs.org/package/@yworks/react-yfiles-orgchart)\n\n[![yFiles React Organization Chart Component](https://raw.githubusercontent.com/yWorks/react-yfiles-orgchart/main/assets/react-orgchart-component.gif)](https://docs.yworks.com/react-yfiles-orgchart)\n\nWelcome to the *yFiles React Organization Chart* component, a powerful and versatile React component based on the [yFiles](https://www.yworks.com/yfiles-overview) library. \nThis component enables seamless integration for displaying organization charts in your React applications.\n\n## Getting Started\n\n### Prerequisites\n\nTo use the Organization Chart component, [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) is required.\nYou can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).\nSee [Licensing](https://docs.yworks.com/react-yfiles-orgchart/introduction/licensing) for more information on this topic.\n\nYou can learn how to work with the yFiles npm module in our [Developer’s Guide](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module). A convenient way of getting access to yFiles is to use the [yFiles Dev Suite](https://www.npmjs.com/package/yfiles-dev-suite).\n\n### Project Setup\n\n1. **Installation**\n\n   In addition to yFiles, the Organization Chart component requires React to be installed in your project.\n   If you want to start your project from scratch, we recommend using vite:\n   ```\n   npm create vite@6.1.1 my-orgchart-app -- --template react-ts\n   ```\n\n   Add the yFiles dependency:\n   ```\n   npm install \u003cyFiles package path\u003e/lib/yfiles-30.0.0+dev.tgz\n   ```\n\n   \u003cdetails\u003e\n\n   \u003csummary\u003eSample \u003ccode\u003epackage.json\u003c/code\u003e dependencies\u003c/summary\u003e\n   The resulting package.json dependencies should resemble the following:\n\n   ```json\n      \"dependencies\": {\n        \"react\": \"^18.2.0\",\n        \"react-dom\": \"^18.2.0\",\n        \"@yfiles/yfiles\": \"./lib/yfiles-30.0.0+dev.tgz\"\n     }\n   ```\n   \u003c/details\u003e\n\n   Now, the component itself can be installed:\n   ```bash\n   npm install @yworks/react-yfiles-orgchart\n   ```\n\n2. **License**\n\n   Be sure to invoke the `registerLicense` function before using the Organization Chart React component.\n   When evaluating yFiles, the license JSON file is found in the `lib/` folder of the yFiles for HTML evaluation package.\n   For licensed users, the license data is provided separately.\n\n   \u003cdetails\u003e\n\n   \u003csummary\u003eLicense registration\u003c/summary\u003e\n\n   Import or paste your license data and register the license, e.g. in `App.tsx`:\n\n   ```js\n   import yFilesLicense from './license.json'\n\n   registerLicense(yFilesLicense)\n   ```\n   \u003c/details\u003e\n\n3. **Stylesheet**\n\n   Make sure to import the CSS stylesheet as well:\n\n   ```js\n   import '@yworks/react-yfiles-orgchart/dist/index.css'\n   ```\n\n4. **Usage**\n\n   You are now all set to utilize the Organization Chart component with your data!\n   See a basic example `App.tsx` below:\n\n   ```tsx\n   import { \n     CustomOrgChartData, \n     OrgChart, \n     registerLicense \n   } from '@yworks/react-yfiles-orgchart'\n   \n   import '@yworks/react-yfiles-orgchart/dist/index.css'\n   \n   import yFilesLicense from './license.json'\n   \n   registerLicense(yFilesLicense)\n   \n   const data = [\n     { id: 0, name: 'Eric Joplin', subordinates: [1, 2] },\n     { id: 1, name: 'Amy Kain' },\n     { id: 2, name: 'David Kerry' }\n   ] satisfies CustomOrgChartData\u003c{name: string}\u003e\n   \n   function App() {\n     return \u003cOrgChart data={data}\u003e\u003c/OrgChart\u003e\n   }\n   \n   export default App\n   ```\n\n    \u003e **Note:** By default, the `OrgChart` component adjusts its size to match the size of its parent element. Therefore, it is necessary to set the dimensions of the containing element or apply styling directly to the `OrgChart` component. This can be achieved by defining a CSS class or applying inline styles.\n\n## Documentation\n\nFind the full documentation, API and many code examples in our [documentation](https://docs.yworks.com/react-yfiles-orgchart).\n\n## Live Playground\n\n[![Live Playground](https://raw.githubusercontent.com/yWorks/react-yfiles-orgchart/main/assets/playground.png)](https://docs.yworks.com/react-yfiles-orgchart/introduction/welcome)\n\nTry the yFiles React Organization Chart component directly in your browser with our [playground](https://docs.yworks.com/react-yfiles-orgchart/introduction/welcome)\n\n## Features\n\nThe component provides versatile features out of the box that can be further tailored to specific use cases. \n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"https://docs.yworks.com/react-yfiles-orgchart/introduction/welcome\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/yWorks/react-yfiles-orgchart/main/assets/level-of-detail.png\" title=\"Level of detail visualization\" alt=\"Level of detail visualization\"\u003e\u003c/a\u003e\u003cbr\u003e\n            \u003ca href=\"https://docs.yworks.com/react-yfiles-orgchart/introduction/welcome\"\u003eLevel of detail visualization\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u003ca href=\"https://docs.yworks.com/react-yfiles-orgchart/features/custom-items\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/yWorks/react-yfiles-orgchart/main/assets/custom-visualization.png\" title=\"Custom visualization\" alt=\"Custom visualization\"\u003e\u003c/a\u003e\u003cbr\u003e\n            \u003ca href=\"https://docs.yworks.com/react-yfiles-orgchart/features/custom-items\"\u003eCustom visualization\u003c/a\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"https://docs.yworks.com/react-yfiles-orgchart/features/hook-orgchartprovider\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/yWorks/react-yfiles-orgchart/main/assets/collapse-expand.png\" title=\"Collapse / Expand\" alt=\"Collapse / Expand\"\u003e\u003c/a\u003e\u003cbr\u003e\n            \u003ca href=\"https://docs.yworks.com/react-yfiles-orgchart/features/hook-orgchartprovider\"\u003eInteractive Collapse / Expand\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u003ca href=\"https://docs.yworks.com/react-yfiles-orgchart/features/search\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/yWorks/react-yfiles-orgchart/main/assets/search.png\" title=\"Search\" alt=\"Search\"\u003e\u003c/a\u003e\u003cbr\u003e\n            \u003ca href=\"https://docs.yworks.com/react-yfiles-orgchart/features/search\"\u003eSearch\u003c/a\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\nFind all features in the [documentation](https://docs.yworks.com/react-yfiles-orgchart) and try them directly in the\nbrowser with our integrated code playground.\n\n## Licensing\n\nAll owners of a valid software license for [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html)\nare allowed to use these sources as the basis for their own [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html)\npowered applications.\n\nUse of such programs is governed by the rights and conditions as set out in the\n[yFiles for HTML license agreement](https://www.yworks.com/products/yfiles-for-html/sla).\n\nYou can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).\n\nFor more information, see the `LICENSE` file.\n\n## Learn More\n\nExplore the possibilities of visualizing organizational structures with the yFiles Organization Chart Component. For further information about [yFiles for HTML](https://www.yworks.com/yfiles-overview) and our company, please visit [yWorks.com](https://www.yworks.com).\n\nIf you are exploring a different use case and require another React component,\nplease take a look at the available [React components](https://www.yworks.com/yfiles-react-components) powered by yFiles!\n\nFor support or feedback, please reach out to [our support team](https://www.yworks.com/contact) or open an [issue on GitHub](https://github.com/yWorks/react-yfiles-orgchart/issues). Happy diagramming!\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyworks%2Freact-yfiles-orgchart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyworks%2Freact-yfiles-orgchart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyworks%2Freact-yfiles-orgchart/lists"}