This package provides a wrapper to use the Desmos API 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].
npm install desmos-reactimport {Expression, GraphingCalculator, useHelperExpression} from "desmos-react";
function Demo() {
return (
<GraphingCalculator
attributes={{className: "calculator"}}
fontSize={18} keypad projectorMode
>
<Expression id="slider" latex="a=3" />
<Point />
</GraphingCalculator>
);
}
/* useHelperExpression() can only be used inside <GraphingCalculator/>,
which is why this couldn't go in <Demo/> */
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 (
<Expression id="point" latex="(a,0)" label={label} showLabel />
);
}This package exports four components and two functions. See https://www.desmos.com/api/v1.6/docs/ for the full list of options.
<GraphingCalculator>, <FourFunctionCalculator>, <ScientificCalculator>
These load the various types of calculator Desmos provides. In addition to the Desmos options, these support an attributes prop to attach additional attributes to the <div> 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.
<Expression>
Desmos expression. Put these inside <GraphingCalculator>.
useHelperExpression()
Hook for using helper expressions, see above for usage.
elt(calculator)
This returns the <div> hosting a calculator.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent