{"id":50788088,"url":"https://github.com/biomathcode/react-odontogram","last_synced_at":"2026-06-12T09:31:25.067Z","repository":{"id":316760787,"uuid":"1064747171","full_name":"biomathcode/react-odontogram","owner":"biomathcode","description":"lightweight and fully customizable React component for visualizing and interacting with dental charts (odontograms).","archived":false,"fork":false,"pushed_at":"2026-04-30T08:45:12.000Z","size":6999,"stargazers_count":49,"open_issues_count":13,"forks_count":18,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-02T15:07:20.571Z","etag":null,"topics":["odontogram","react-odontogram","typodont"],"latest_commit_sha":null,"homepage":"https://biomathcode.github.io/react-odontogram","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/biomathcode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-26T13:47:45.000Z","updated_at":"2026-05-28T04:07:52.000Z","dependencies_parsed_at":"2025-10-28T16:10:21.234Z","dependency_job_id":"3f001088-89a3-4b52-9a01-432d402c8459","html_url":"https://github.com/biomathcode/react-odontogram","commit_stats":null,"previous_names":["biomathcode/react-odontogram"],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/biomathcode/react-odontogram","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biomathcode%2Freact-odontogram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biomathcode%2Freact-odontogram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biomathcode%2Freact-odontogram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biomathcode%2Freact-odontogram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/biomathcode","download_url":"https://codeload.github.com/biomathcode/react-odontogram/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biomathcode%2Freact-odontogram/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34238712,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["odontogram","react-odontogram","typodont"],"created_at":"2026-06-12T09:31:24.398Z","updated_at":"2026-06-12T09:31:25.059Z","avatar_url":"https://github.com/biomathcode.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n# 🦷 `react-odontogram`\n\n\n\n[![npm version](https://img.shields.io/npm/v/react-odontogram?color=blue\\\u0026label=npm)](https://www.npmjs.com/package/react-odontogram)\n[![npm downloads](https://img.shields.io/npm/dm/react-odontogram?color=green\\\u0026label=downloads)](https://www.npmjs.com/package/react-odontogram)\n[![Storybook](https://img.shields.io/badge/Storybook-Demo-orange)](https://biomathcode.github.io/react-odontogram)\n[![codecov](https://codecov.io/gh/biomathcode/react-odontogram/branch/main/graph/badge.svg?token=)](https://codecov.io/gh/biomathcode/react-odontogram)\n\nA modern, interactive **React Odontogram** component for dental chart visualization and data collection.\nBuilt with SVG and React hooks — fully customizable, accessible, and designed for clinical or academic applications.\n\n---\n\n## 🖼️ Preview\n\n| Light Mode                                                                                                   | Dark Mode                                                                                                  |\n| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- |\n| ![Light preview](https://github.com/biomathcode/react-odontogram/blob/main/assets/previewlight.png) | ![Dark preview](https://github.com/biomathcode/react-odontogram/blob/main/assets/previewdark.png) |\n\n---\n\n## 🧩 Demo\n\n👉 **Live Preview:** [https://biomathcode.github.io/react-odontogram](https://biomathcode.github.io/react-odontogram)\n\n---\n\n## 📦 Installation\n\n```bash\n# Using npm\nnpm install react-odontogram\n\n# Using pnpm\npnpm add react-odontogram\n\n# Using yarn\nyarn add react-odontogram\n```\n\n\u003e Make sure you have `react` and `react-dom` installed as peer dependencies.\n\n---\n\n## 🚀 Quick Start\n\n```tsx\nimport { Odontogram } from \"react-odontogram\";\nimport \"react-odontogram/style.css\";\n\nexport default function App() {\n  const handleChange = (selectedTeeth) =\u003e {\n    console.log(selectedTeeth);\n    /*\n      Example output:\n      [\n        {\n          \"id\": \"teeth-21\",\n          \"notations\": {\n            \"fdi\": \"21\",\n            \"universal\": \"9\",\n            \"palmer\": \"1UL\"\n          },\n          \"type\": \"Central Incisor\"\n        },\n        {\n          \"id\": \"teeth-12\",\n          \"notations\": {\n            \"fdi\": \"12\",\n            \"universal\": \"7\",\n            \"palmer\": \"2UR\"\n          },\n          \"type\": \"Lateral Incisor\"\n        }\n      ]\n    */\n  };\n\n  return \u003cOdontogram onChange={handleChange} /\u003e;\n}\n```\n\n---\n\n## 🧠 onChange Return Type\n\nThe `onChange` callback returns an **array of selected teeth objects**:\n\n```ts\ntype ToothDetail = {\n  id: string;\n  notations: {\n    fdi: string;\n    universal: string;\n    palmer: string;\n  };\n  type: string;\n};\n```\n\nExample JSON output:\n\n```json\n[\n  {\n    \"id\": \"teeth-21\",\n    \"notations\": {\n      \"fdi\": \"21\",\n      \"universal\": \"9\",\n      \"palmer\": \"1UL\"\n    },\n    \"type\": \"Central Incisor\"\n  },\n  {\n    \"id\": \"teeth-12\",\n    \"notations\": {\n      \"fdi\": \"12\",\n      \"universal\": \"7\",\n      \"palmer\": \"2UR\"\n    },\n    \"type\": \"Lateral Incisor\"\n  }\n]\n```\n\n---\n\n## ⚙️ Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `defaultSelected` | `string[]` | `[]` | Tooth IDs selected on first render. |\n| `singleSelect` | `boolean` | `false` | Allow selecting only one tooth at a time (clicking the selected tooth clears it). |\n| `onChange` | `(selectedTeeth: ToothDetail[]) =\u003e void` | — | Called whenever selection changes. |\n| `name` | `string` | `\"teeth\"` | Name used for hidden form input. |\n| `className` | `string` | `\"\"` | Additional class for wrapper customization. |\n| `theme` | `\"light\" \\| \"dark\"` | `\"light\"` | Applies built-in light/dark palette. |\n| `colors` | `{ darkBlue?: string; baseBlue?: string; lightBlue?: string }` | `{}` | Override palette colors. |\n| `notation` | `\"FDI\" \\| \"Universal\" \\| \"Palmer\"` | `\"FDI\"` | Display notation in native tooth titles/tooltips. |\n| `tooltip` | `{ placement?: Placement; margin?: number; content?: ReactNode \\| ((payload?: ToothDetail) =\u003e ReactNode) }` | `{ placement: \"top\", margin: 10 }` | Tooltip behavior and custom content renderer. |\n| `showTooltip` | `boolean` | `true` | Enables/disables tooltip rendering. |\n| `showHalf` | `\"full\" \\| \"upper\" \\| \"lower\"` | `\"full\"` | Render full chart or only upper/lower arches. |\n| `maxTeeth` | `number` | `8` | Number of teeth per quadrant (for baby/mixed dentition views). |\n| `teethConditions` | `ToothConditionGroup[]` | `undefined` | Colorize specific teeth by condition. |\n| `readOnly` | `boolean` | `false` | Disable interactions and selection changes. |\n| `showLabels` | `boolean` | `false` | Show the condition legend under the chart. |\n| `layout` | `\"circle\" \\| \"square\"` | `\"circle\"` | Render classic arch layout or square/row layout. |\n| `styles` | `React.CSSProperties` | `undefined` | Inline styles applied to the root container. |\n\n`Placement` values:\n\n```ts\ntype Placement =\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\";\n```\n\n`teethConditions` shape:\n\n```ts\ntype ToothConditionGroup = {\n  label: string;\n  teeth: string[]; // e.g. [\"teeth-11\", \"teeth-12\"]\n  outlineColor: string;\n  fillColor: string;\n};\n```\n\n---\n\n## 🧩 Common Recipes\n\n### 1) Render a custom tooltip\n\n```tsx\nimport { Odontogram } from \"react-odontogram\";\nimport \"react-odontogram/style.css\";\n\nexport default function CustomTooltipExample() {\n  return (\n    \u003cOdontogram\n      tooltip={{\n        placement: \"top\",\n        content: (payload) =\u003e (\n          \u003cdiv style={{ minWidth: 140 }}\u003e\n            \u003cstrong\u003eTooth {payload?.notations.fdi}\u003c/strong\u003e\n            \u003cdiv\u003e{payload?.type}\u003c/div\u003e\n            \u003csmall\u003eUniversal: {payload?.notations.universal}\u003c/small\u003e\n          \u003c/div\u003e\n        ),\n      }}\n    /\u003e\n  );\n}\n```\n\n### 2) Change theme and colors\n\n```tsx\nimport { Odontogram } from \"react-odontogram\";\nimport \"react-odontogram/style.css\";\n\nexport default function ThemeExample() {\n  return (\n    \u003cOdontogram\n      className=\"my-odontogram\"\n      theme=\"dark\"\n      colors={{\n        darkBlue: \"#7c9cff\",\n        baseBlue: \"#c7d2fe\",\n        lightBlue: \"#4f46e5\",\n      }}\n    /\u003e\n  );\n}\n```\n\n```css\n.my-odontogram {\n  --odontogram-tooltip-bg: #0f172a;\n  --odontogram-tooltip-fg: #f8fafc;\n}\n```\n\n### 3) Show `teethConditions` (with legend)\n\n```tsx\nimport { Odontogram } from \"react-odontogram\";\nimport \"react-odontogram/style.css\";\n\nconst conditions = [\n  {\n    label: \"caries\",\n    teeth: [\"teeth-16\", \"teeth-26\", \"teeth-36\"],\n    fillColor: \"#ef4444\",\n    outlineColor: \"#b91c1c\",\n  },\n  {\n    label: \"filling\",\n    teeth: [\"teeth-14\", \"teeth-24\"],\n    fillColor: \"#60a5fa\",\n    outlineColor: \"#1d4ed8\",\n  },\n];\n\nexport default function ConditionsExample() {\n  return \u003cOdontogram teethConditions={conditions} showLabels readOnly /\u003e;\n}\n```\n\n### 4) Adjust tooltip position\n\n```tsx\nimport { Odontogram } from \"react-odontogram\";\nimport \"react-odontogram/style.css\";\n\nexport default function TooltipPositionExample() {\n  return (\n    \u003cOdontogram\n      tooltip={{\n        placement: \"right-start\", // try: top, right, bottom-end, left-start...\n        margin: 18, // larger = farther from tooth, smaller = closer\n      }}\n    /\u003e\n  );\n}\n```\n\n---\n\n## 🦷 Tooth Data Model\n\nEach tooth is internally defined in a structured format:\n\n```ts\n{\n  name: \"1\",\n  type: \"Central Incisor\",\n  outlinePath: \"...\",\n  shadowPath: \"...\",\n  lineHighlightPath: \"...\"\n}\n```\n\nThis makes it easy to extend or customize if you fork the library.\n\n---\n\n## 🧪 Development\n\nRun locally:\n\n```bash\ngit clone https://github.com/biomathcode/react-odontogram.git\ncd react-odontogram\npnpm install\npnpm dev\n```\n\nTo preview Storybook:\n\n```bash\npnpm storybook\n```\n\n---\n\n## 🪶 License\n\nMIT © [biomathcode](https://github.com/biomathcode)\n\n---\n\n## 💬 Feedback\n\nIf this library helps your dental project, please ⭐ the repo or open issues/PRs for enhancements!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiomathcode%2Freact-odontogram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiomathcode%2Freact-odontogram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiomathcode%2Freact-odontogram/lists"}