JSPM

op-odontogram

1.1.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 8
  • Score
    100M100P100Q39717F
  • License MIT

Una librería de React para crear odontogramas dentales interactivos

Package Exports

  • op-odontogram
  • op-odontogram/dist/index.es.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 (op-odontogram) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

OP Odontogram

OP Odontogram Demo

MIT License React TypeScript Vite Beta

Descripción

OP Odontogram es una librería de React para crear odontogramas dentales interactivos. Permite visualizar y gestionar el estado de dientes permanentes y temporales con una interfaz moderna e intuitiva.

⚠️ Nota: Esta librería está actualmente en versión beta. La API puede cambiar en futuras versiones.

Características

  • 🦷 32 dientes permanentes y 20 temporales - Soporte completo para dentición mixta
  • 🎨 Estados personalizables - Caries, obturaciones, coronas, extracciones y más
  • 🌊 Animaciones fluidas - Efectos de mordida y transiciones suaves
  • 📱 Responsive - Se adapta a diferentes tamaños de pantalla
  • 💾 Persistencia local - Guarda automáticamente los cambios
  • 🏴‍☠️ Open Source - Completamente libre y gratuito

Instalación

Como aplicación demo

# Clonar el repositorio
git clone https://github.com/pedroinformatico/op-odontorgram.git

# Navegar al directorio
cd op-odontogram

# Instalar dependencias
npm install

# Iniciar el servidor de desarrollo
npm run dev

Como librería npm

npm install op-odontogram

Uso Básico

import { Odontogram } from "op-odontogram";
import "op-odontogram/styles/odontogram.css";

function App() {
  return (
    <Odontogram
      teeth={teeth}
      onToothClick={(tooth) => console.log("Diente seleccionado:", tooth)}
    />
  );
}

Demo Interactiva

Interfaz del Odontogram

La aplicación incluye:

  • 🎮 Modo Demo - Ejemplos de diferentes estados dentales
  • 🦷 Animación de mordida - Visualización del movimiento dental
  • 📊 Panel de detalles - Información completa de cada diente
  • 🔧 Herramientas de estado - Gestión completa del estado dental

Contribuir

¡Las contribuciones son bienvenidas! Para contribuir:

  1. Fork el proyecto
  2. Crea tu Feature Branch (git checkout -b feature/nueva-funcionalidad)
  3. Commit tus cambios (git commit -m 'Add: nueva funcionalidad')
  4. Push a la rama (git push origin feature/nueva-funcionalidad)
  5. Abre un Pull Request

¿Necesitas ayuda?

Colaboradores

¿Quieres ser parte de este proyecto? ¡Todos los nakamas son bienvenidos a la travesía!

  • 💻 Desarrolladores - Mejoras en funcionalidad y rendimiento
  • 🎨 Diseñadores - Interfaz y experiencia de usuario
  • 📚 Documentadores - Guías y tutoriales
  • 🔬 Testers - Pruebas y control de calidad

Licencia

Este proyecto está bajo la Licencia MIT - ve el archivo LICENSE para más detalles.

Tecnologías

  • React 18.3
  • TypeScript
  • Tailwind CSS
  • DaisyUI
  • Vite
  • Lucide React

Nota: Si tienes cualquier problema con los dientes, solo toma leche 🥛