@latex-math/react 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +153 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
# @latex-math/react
|
|
2
|
+
|
|
3
|
+
Interactive React components and hooks for math input, live rendering, and real-time LaTeX evaluation. Powered by `@latex-math/core` and MathLive.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@latex-math/react)
|
|
6
|
+
[](LICENSE)
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## Features
|
|
11
|
+
|
|
12
|
+
- 🧮 **Interactive `LatexInput`**: Visual, WYSIWYG math editing powered by MathLive. Supports keyboard shortcuts (`/` for fractions, `^` for powers), symbol toolbars, and instant copy buttons.
|
|
13
|
+
- 🔄 **TeX Auto-Normalization**: Visual indicators and automatic correction for unbraced syntax (e.g. typing `\sqrt 1+2` prompts or normalizes to `\sqrt{1} + 2`).
|
|
14
|
+
- ✍️ **Fast Rendering (`LatexExpression`)**: Built-in KaTeX equation renderer for display and inline mathematical formulas.
|
|
15
|
+
- 🎣 **Evaluation Hook (`useLatexEvaluation`)**: Reactive hook that parses and evaluates mathematical LaTeX on the fly with custom variable scopes and error boundaries.
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Installation
|
|
20
|
+
|
|
21
|
+
Install both `@latex-math/react` and `@latex-math/core`:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @latex-math/react @latex-math/core
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
yarn add @latex-math/react @latex-math/core
|
|
29
|
+
# or
|
|
30
|
+
pnpm add @latex-math/react @latex-math/core
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## Quick Start
|
|
36
|
+
|
|
37
|
+
### 1. `LatexInput` (WYSIWYG Math Editor)
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import React, { useState } from 'react';
|
|
41
|
+
import { LatexInput } from '@latex-math/react';
|
|
42
|
+
|
|
43
|
+
export function MathEditor() {
|
|
44
|
+
const [latex, setLatex] = useState('\\frac{a}{b} + \\sqrt{x}');
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<div className="max-w-xl mx-auto p-4">
|
|
48
|
+
<LatexInput
|
|
49
|
+
value={latex}
|
|
50
|
+
onChange={setLatex}
|
|
51
|
+
placeholder="Type math..."
|
|
52
|
+
showToolbar={true}
|
|
53
|
+
showLatexBadge={true}
|
|
54
|
+
/>
|
|
55
|
+
</div>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### 2. `LatexExpression` (Math Display)
|
|
61
|
+
|
|
62
|
+
Render static or dynamic mathematical expressions with KaTeX:
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import React from 'react';
|
|
66
|
+
import { LatexExpression } from '@latex-math/react';
|
|
67
|
+
|
|
68
|
+
export function EquationDisplay() {
|
|
69
|
+
return (
|
|
70
|
+
<div>
|
|
71
|
+
{/* Display block */}
|
|
72
|
+
<LatexExpression expression="\int_{0}^{\infty} e^{-x^2} \, dx = \frac{\sqrt{\pi}}{2}" displayMode={true} />
|
|
73
|
+
|
|
74
|
+
{/* Inline math */}
|
|
75
|
+
<p>
|
|
76
|
+
The quadratic formula is <LatexExpression expression="x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}" displayMode={false} />.
|
|
77
|
+
</p>
|
|
78
|
+
</div>
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### 3. `useLatexEvaluation` (Real-Time Evaluation Hook)
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
import React, { useState } from 'react';
|
|
87
|
+
import { LatexInput, useLatexEvaluation } from '@latex-math/react';
|
|
88
|
+
|
|
89
|
+
export function Calculator() {
|
|
90
|
+
const [latex, setLatex] = useState('2x^2 + 3x - 5');
|
|
91
|
+
|
|
92
|
+
const { result, error, isEvaluating } = useLatexEvaluation(latex, {
|
|
93
|
+
variables: { x: 3 }
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
return (
|
|
97
|
+
<div className="space-y-4">
|
|
98
|
+
<LatexInput value={latex} onChange={setLatex} />
|
|
99
|
+
|
|
100
|
+
{isEvaluating && <p>Evaluating...</p>}
|
|
101
|
+
{error && <p className="text-red-500">Error: {error.message}</p>}
|
|
102
|
+
{result !== null && (
|
|
103
|
+
<div className="font-semibold text-lg">
|
|
104
|
+
Result for x = 3: {result.toString()}
|
|
105
|
+
</div>
|
|
106
|
+
)}
|
|
107
|
+
</div>
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
## Component API
|
|
115
|
+
|
|
116
|
+
### `<LatexInput />`
|
|
117
|
+
|
|
118
|
+
| Prop | Type | Default | Description |
|
|
119
|
+
|---|---|---|---|
|
|
120
|
+
| `value` | `string` | *(required)* | Current LaTeX string value |
|
|
121
|
+
| `onChange` | `(value: string) => void` | *(required)* | Callback fired when the expression changes |
|
|
122
|
+
| `placeholder` | `string` | `"\text{Type math... }"` | Placeholder displayed inside empty math field |
|
|
123
|
+
| `showToolbar` | `boolean` | `true` | Displays quick math buttons (fractions, powers, roots, calculus, trig) |
|
|
124
|
+
| `showLatexBadge` | `boolean` | `true` | Displays bottom bar showing the underlying LaTeX string and copy action |
|
|
125
|
+
| `className` | `string` | `""` | Container styling class |
|
|
126
|
+
|
|
127
|
+
### `<LatexExpression />`
|
|
128
|
+
|
|
129
|
+
| Prop | Type | Default | Description |
|
|
130
|
+
|---|---|---|---|
|
|
131
|
+
| `expression` | `string` | *(required)* | The LaTeX string to render |
|
|
132
|
+
| `displayMode` | `boolean` | `true` | Whether to render as centered display mode (`true`) or inline (`false`) |
|
|
133
|
+
| `className` | `string` | `""` | Additional CSS class names |
|
|
134
|
+
|
|
135
|
+
### `useLatexEvaluation(expression, options)`
|
|
136
|
+
|
|
137
|
+
```typescript
|
|
138
|
+
const { result, ast, error, isEvaluating } = useLatexEvaluation(expression, {
|
|
139
|
+
variables: { x: 4, y: 10 }
|
|
140
|
+
});
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
- **`expression`**: `string` - The LaTeX formula to evaluate.
|
|
144
|
+
- **`options.variables`**: `Record<string, number>` - Optional variable values.
|
|
145
|
+
- **`result`**: Computed number, matrix, or null.
|
|
146
|
+
- **`ast`**: The parsed `@latex-math/core` AST node.
|
|
147
|
+
- **`error`**: Evaluation or parsing error if invalid.
|
|
148
|
+
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
## License
|
|
152
|
+
|
|
153
|
+
MIT © [Sora1123](https://github.com/Sora1123)
|