desmos-react

desmos-react

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 [e-mail].

Usage

import {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 />
  );
}

Reference

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.