dental chart for selecting teeth
npm install react-odontogramreact-odontogram



A modern, interactive React Odontogram component for dental chart visualization and data collection.
Built with SVG and React hooks โ fully customizable, accessible, and designed for clinical or academic applications.
---
| Light Mode | Dark Mode |
| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- |
| !Light preview | !Dark preview |
---
๐ Live Preview: https://biomathcode.github.io/react-odontogram
---
``bashUsing npm
npm install react-odontogram
> Make sure you have
react and react-dom installed as peer dependencies.---
๐ Quick Start
`tsx
import { Odontogram } from "react-odontogram";export default function App() {
const handleChange = (selectedTeeth) => {
console.log(selectedTeeth);
/*
Example output:
[
{
"id": "teeth-21",
"notations": {
"fdi": "21",
"universal": "9",
"palmer": "1UL"
},
"type": "Central Incisor"
},
{
"id": "teeth-12",
"notations": {
"fdi": "12",
"universal": "7",
"palmer": "2UR"
},
"type": "Lateral Incisor"
}
]
*/
};
return ;
}
`---
๐ง onChange Return Type
The
onChange callback returns an array of selected teeth objects:`ts
type ToothSelection = {
id: string;
notations: {
fdi: string;
universal: string;
palmer: string;
};
type: string;
};
`Example JSON output:
`json
[
{
"id": "teeth-21",
"notations": {
"fdi": "21",
"universal": "9",
"palmer": "1UL"
},
"type": "Central Incisor"
},
{
"id": "teeth-12",
"notations": {
"fdi": "12",
"universal": "7",
"palmer": "2UR"
},
"type": "Lateral Incisor"
}
]
`---
โ๏ธ Props
| Prop | Type | Default | Description |
| ----------------- | ------------------------------------------- | ------- | ------------------------------------------------------- |
|
onChange | (selectedTeeth: ToothSelection[]) => void | โ | Triggered whenever the user selects or deselects teeth. |
| initialSelected | string[] | [] | Array of tooth IDs to preselect. |
| readOnly | boolean | false | Makes the odontogram non-interactive (view-only). |
| className | string | โ | Optional class for custom styling. |---
๐ฆท Tooth Data Model
Each tooth is internally defined in a structured format:
`ts
{
id: "teeth-21",
name: "21",
type: "Central Incisor",
notations: {
fdi: "21",
universal: "9",
palmer: "1UL"
},
outlinePath: "...",
shadowPath: "...",
lineHighlightPath: "..."
}
`This makes it easy to extend or customize if you fork the library.
---
๐งช Development
Run locally:
`bash
git clone https://github.com/biomathcode/react-odontogram.git
cd react-odontogram
pnpm install
pnpm dev
`To preview Storybook:
`bash
pnpm storybook
``---
MIT ยฉ biomathcode
---
If this library helps your dental project, please โญ the repo or open issues/PRs for enhancements!