https://github.com/ysulyma/desmos-react
React wrapper for Desmos
https://github.com/ysulyma/desmos-react
desmos desmos-calculator education math react
Last synced: 12 days ago
JSON representation
React wrapper for Desmos
- Host: GitHub
- URL: https://github.com/ysulyma/desmos-react
- Owner: ysulyma
- License: mit
- Created: 2021-05-31T13:53:52.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-21T18:24:02.000Z (3 months ago)
- Last Synced: 2025-04-15T03:15:20.397Z (12 days ago)
- Topics: desmos, desmos-calculator, education, math, react
- Language: TypeScript
- Homepage:
- Size: 250 KB
- Stars: 16
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# desmos-react
This package provides a wrapper to use the [Desmos API](https://www.desmos.com/api/v1.6/docs/) in React.
**This package is not affiliated with Desmos. To use this in your product or obtain an API key, please reach out to [email protected].**
## Installation
```bash
npm install desmos-react
```
## Usage
```tsx
import {Expression, GraphingCalculator, useHelperExpression} from "desmos-react";
function Demo() {
return (
);
}
/* useHelperExpression() can only be used inside ,
which is why this couldn't go in */
function Point() {
const a = useHelperExpression({latex: "a"});
let label;
if (a > 0)
label = "positive x-axis"
else if (a < 0)
label = "negative x-axis"
else
label = "origin";
return (
);
}
```
## Reference
This package exports four components and two functions. See https://www.desmos.com/api/v1.6/docs/ for the full list of options.
``, ``, ``
These load the various types of calculator Desmos provides. In addition to the [Desmos options](https://www.desmos.com/api/v1.6/docs/index.html#document-calculator), these support an `attributes` prop to attach additional attributes to the `
` hosting the calculator.
Using `ref` on a calculator will return a ref to the calculator object, not the div. If you need access to the div, use the `elt()` function below.
``
Desmos [expression](https://www.desmos.com/api/v1.6/docs/index.html#document-manipulating-expressions). Put these inside ``.
`useHelperExpression()`
Hook for using helper expressions, see above for usage.
`elt(calculator)`
This returns the `
` hosting a calculator.