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 partnerships@desmos.com.

Installation

npm install desmos-react

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.