Package Exports
- @smst/edu-tools
- @smst/edu-tools/annotator
- @smst/edu-tools/askai
- @smst/edu-tools/browser
- @smst/edu-tools/calculator
- @smst/edu-tools/context7
- @smst/edu-tools/dictionary
- @smst/edu-tools/equation
- @smst/edu-tools/geogebra
- @smst/edu-tools/magnifier
- @smst/edu-tools/periodic
- @smst/edu-tools/protractor
- @smst/edu-tools/ruler
- @smst/edu-tools/setsquare
- @smst/edu-tools/styles
- @smst/edu-tools/todo
- @smst/edu-tools/tts
Readme
@smst/edu-tools
A comprehensive collection of educational tools and utilities as reusable React components
A modern, lightweight, and fully-featured library of educational tools built with React. Perfect for building educational platforms, learning management systems, or any application that needs interactive educational components.
✨ Features
- 🎨 15 Ready-to-Use Tools - From calculators to equation editors
- 🔌 Zero Configuration - Import and use immediately
- 📦 Tree-Shakeable - Only bundle what you use
- 🎯 TypeScript Support - Full type definitions included
- 🎭 Modern UI - Beautiful, responsive components with Tailwind CSS
- ♿ Accessible - Built with accessibility in mind
- 🪟 Draggable Windows - Optional window management system
📦 Installation
npm install @smst/edu-toolsPeer Dependencies
Make sure you have React installed:
npm install react react-dom🚀 Quick Start
import { Calculator, Ruler, EquationEditor } from "@smst/edu-tools";
import "@smst/edu-tools/styles";
function App() {
return (
<div>
<h1>My Educational App</h1>
<Calculator />
<Ruler lengthPx={800} />
<EquationEditor />
</div>
);
}Important: Don't forget to import the styles!
🧰 Available Tools
Math & Science
- Calculator - Full-featured calculator with keyboard support
- EquationEditor - LaTeX-based mathematical equation editor powered by MathLive
- PeriodicTable - Interactive periodic table of elements
- Protractor - Rotatable protractor for angle measurement
- Ruler - Interactive ruler with inches and centimeters
- SetSquare - Drawing tool for geometry
- GeoGebra - Interactive geometry and graphing tool
Productivity
- Todo - Task management component
- Magnifier - Text magnification tool for accessibility
- TTSReader - Text-to-speech functionality
- Browser - Embedded browser component
- Dictionary - Word lookup and definitions
- Annotator - Text annotation and highlighting tool
AI & Learning
- AskAI - AI assistant interface for answering questions
- Context7 - Integrated documentation browser
💡 Usage Examples
Basic Import
import { Calculator, Timer, Ruler } from "@smst/edu-tools";
import "@smst/edu-tools/styles";
function MyApp() {
return (
<>
<Calculator />
<Ruler lengthPx={600} />
</>
);
}Individual Import (Better Tree-Shaking)
For smaller bundle sizes, import tools individually:
import { Calculator } from "@smst/edu-tools/calculator";
import { Ruler } from "@smst/edu-tools/ruler";
import "@smst/edu-tools/styles";
// Only Calculator and Ruler code is bundled!Lazy Loading
For even better performance, lazy load components:
import { lazy, Suspense } from "react";
const Calculator = lazy(() =>
import("@smst/edu-tools/calculator").then((m) => ({
default: m.Calculator,
}))
);
function App() {
return (
<Suspense fallback={<div>Loading calculator...</div>}>
<Calculator />
</Suspense>
);
}With Draggable Windows
Create floating, draggable tool windows:
import { Calculator, WindowLayer, useWindowStore } from "@smst/edu-tools";
import "@smst/edu-tools/styles";
function App() {
const createWindow = useWindowStore((s) => s.createWindow);
const openCalculator = () => {
createWindow({
type: "calculator",
title: "Calculator",
initialBounds: { width: 320, height: 480, x: 100, y: 100 },
});
};
return (
<div>
<button onClick={openCalculator}>Open Calculator</button>
<WindowLayer />
</div>
);
}🎨 Component Props
Calculator
<Calculator />No props required - fully self-contained calculator with standard and scientific modes.
Ruler
<Ruler
lengthPx={800} // Length in pixels (default: 800)
orientation="horizontal" // or "vertical"
/>EquationEditor
<EquationEditor
initialValue="" // Initial LaTeX value
onChange={(latex) => console.log(latex)}
/>PeriodicTable
<PeriodicTable onElementClick={(element) => console.log(element)} />Protractor
<Protractor
initialAngle={0} // Starting angle in degrees
/>GeoGebra
<GeoGebra
appName="classic" // "classic" | "graphing" | "geometry"
width={800}
height={600}
/>Todo
<Todo />Self-contained todo list with local storage persistence.
TTSReader
<TTSReader text="Text to read aloud" autoPlay={false} />Dictionary
<Dictionary
initialWord="" // Word to look up on mount
onLookup={(word, definition) => console.log(word, definition)}
/>Magnifier
<Magnifier
zoomLevel={2} // Magnification level (default: 2)
width={300}
height={200}
/>🎭 Styling
Default Styles
The library uses Tailwind CSS. Import the bundled styles in your app:
import "@smst/edu-tools/styles";Custom Theming
Override CSS variables to match your brand:
:root {
--color-accent: #your-primary-color;
--color-card: #your-card-background;
--color-foreground: #your-text-color;
--color-border: #your-border-color;
}Integrate with Your Tailwind Config
If you're using Tailwind in your project:
// tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@smst/edu-tools/**/*.js",
],
theme: {
extend: {
// Your customizations
},
},
};📦 Bundle Size
The library is optimized for tree-shaking. When importing individual tools:
| Tool | Gzipped Size |
|---|---|
| Calculator | ~1.8 KB |
| Ruler | ~2.1 KB |
| Protractor | ~1.9 KB |
| Todo | ~1.5 KB |
| Magnifier | ~1.7 KB |
| TTSReader | ~1.6 KB |
| Dictionary | ~2.8 KB |
| PeriodicTable | ~3.5 KB |
| EquationEditor | ~2.5 KB |
| GeoGebra | ~2.2 KB |
| Browser | ~4.5 KB |
| Annotator | ~5.8 KB |
| AskAI | ~2.1 KB |
| Context7 | ~3.2 KB |
Note: Sizes shown are for the component code only, excluding shared dependencies.
🔧 TypeScript Support
Full TypeScript definitions are included. Types are automatically imported with the components:
import { Calculator, CalculatorProps } from "@smst/edu-tools";
import { Ruler, RulerProps } from "@smst/edu-tools/ruler";🌐 Browser Support
- Chrome/Edge (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- Mobile browsers (iOS Safari, Chrome Mobile)
⚡ Performance Tips
Use individual imports for smaller bundles:
import { Calculator } from "@smst/edu-tools/calculator";
Lazy load heavy components:
const EquationEditor = lazy(() => import("@smst/edu-tools/equation"));
Only import styles once in your root component
📚 Examples
Educational Platform
import { Calculator, EquationEditor, PeriodicTable } from "@smst/edu-tools";
import "@smst/edu-tools/styles";
function ScienceClass() {
return (
<div className="grid grid-cols-2 gap-4 p-4">
<div>
<h2>Tools</h2>
<Calculator />
</div>
<div>
<h2>Equation Editor</h2>
<EquationEditor />
</div>
<div className="col-span-2">
<h2>Periodic Table</h2>
<PeriodicTable />
</div>
</div>
);
}Math Practice App
import { Calculator, Ruler, Protractor, GeoGebra } from "@smst/edu-tools";
import "@smst/edu-tools/styles";
function GeometryLesson() {
return (
<div>
<h1>Geometry Practice</h1>
<div className="tools-panel">
<Ruler lengthPx={600} />
<Protractor />
</div>
<div className="workspace">
<GeoGebra appName="geometry" width={800} height={600} />
</div>
<div className="calculator-dock">
<Calculator />
</div>
</div>
);
}Accessibility Features
import { Magnifier, TTSReader, Dictionary } from "@smst/edu-tools";
import "@smst/edu-tools/styles";
function AccessibleReader({ content }) {
return (
<div>
<div className="toolbar">
<Magnifier />
<TTSReader text={content} />
</div>
<article>{content}</article>
<aside>
<Dictionary />
</aside>
</div>
);
}🤝 Contributing
We welcome contributions! See DEVELOPMENT.md for developer documentation, including:
- How to add new tools
- Build and publish workflow
- Auto-discovery system
- Testing guidelines
📄 License
MIT © SMST