Wondering what’s next for npm?Check out our public roadmap! »

    desmos-react

    1.0.3 • Public • Published

    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.

    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.

    Keywords

    none

    Install

    npm i desmos-react

    DownloadsWeekly Downloads

    6

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    12.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar