JSPM – react-teeth-selector@1.0.3

Package Exports

react-teeth-selector
react-teeth-selector/dist/react-teeth-selector.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-teeth-selector) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

#react-teeth-selector

A lightweight, SVG-based interactive teeth diagram selector for React.

Perfect for dental applications, medical software, EHR/EMR systems, clinical dashboards, or any UI that needs tooth selection.

Features

✔ Select teeth by clicking
✔ Hover highlight & tooltip
✔ Supports controlled & uncontrolled states
✔ Callback gives selected map + popup position
✔ Works with any UI library
✔ No dependencies (only React)
✔ SVG-based, pixel-perfect diagram
✔ Customizable size & styling
✔ Lightweight and fast

Installation

npm install react-teeth-selector
or
yarn add react-teeth-selector

Quick Usage

import { useState } from "react";
import { TeethDiagram } from "react-teeth-selector";

function App() {
  const [selectedTeeth, setSelectedTeeth] = useState({});

  return (
    <TeethDiagram
      selectedTeeth={selectedTeeth}
      onChange={(newMap) => setSelectedTeeth(newMap)}
    />
  );
}

export default App;

Controlled vs Uncontrolled

Controlled mode

<TeethDiagram
  selectedTeeth={selected}
  onChange={(updated) => setSelected(updated)}
/>

Uncontrolled mode

<TeethDiagram defaultSelected={{ "tooth-11": true }} />

Props

Prop	Type	Default	Description
selectedTeeth	`{[id]: true}`	—	Controlled mode
defaultSelected	`{[id]: true}`	`{}`	Initial selected teeth
onChange	function	—	Tooth click callback
width	number/string	`350`	Component width
height	number/string	`"auto"`	Component height

Local Development

npm install
npm run dev

Build library:

npm run build

Contributing

PRs, issues, and suggestions are welcome!