A Desmos-like math equation editor component library for React
npm install mathex-editorbash
npm install mathex-editor
`
Quick Start
`tsx
import { MathProvider, MathInput, MathKeyboard } from 'mathex';
function App() {
const [latex, setLatex] = useState('x^2 + 3x + 1');
return (
onChange={setLatex}
placeholder="Enter equation..."
/>
);
}
`
Theming
Mathex supports both light and dark themes out of the box.
$3
`tsx
`
$3
`tsx
`
$3
`tsx
function App() {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const toggleTheme = () => {
setTheme(current => current === 'light' ? 'dark' : 'light');
};
return (
);
}
`
$3
You can customize the theme by providing a ThemeConfig object:
`tsx
const customTheme = {
colors: {
primary: '#FF5722',
background: '#FFF',
text: '#000',
border: '#CCC',
},
// ... more customization options
};
`
Components
$3
The context provider that manages global state and communication between components.
Props:
- theme - 'light' | 'dark' | ThemeConfig - Theme configuration (default: 'light')
- children - React components to wrap
$3
An input field for entering and displaying mathematical equations.
Props:
- value - string - LaTeX string (controlled mode)
- defaultValue - string - LaTeX string (uncontrolled mode)
- onChange - (latex: string) => void - Callback when value changes
- placeholder - string - Placeholder text
- disabled - boolean - Disable input
- className - string - Additional CSS classes
- style - CSSProperties - Inline styles
- onError - (error: Error) => void - Error callback
$3
An on-screen keyboard for entering math symbols and functions.
Props:
- isVisible - boolean - Control keyboard visibility
- onVisibilityChange - (visible: boolean) => void - Visibility change callback
- className - string - Additional CSS classes
- style - CSSProperties - Inline styles
Multiple Inputs
Mathex automatically handles multiple inputs - the keyboard routes input to whichever field is focused:
`tsx
{/ One keyboard routes to all inputs /}
``