A react component to add the GeoGebra Math App to your react project.

Usage no npm install needed!

<script type="module">
  import reactGeogebra from '';


React GeoGebra Component

Hi Everyone. Welcome to my first published package for react.js. I'm going to show you an easy way to embed GeoGebra Maths App to your React project.
This is not an official GeoGebra-project.



Try the demo:


In order to start using react-geogebra ensure you install it inside your react project folder as shown below:

npm install react-geogebra

Now you can import the package:

import Geogebra from 'react-geogebra';

Basic usage

and use it in your application. For example:

function App() {
  return (

Multiple GeoGebra instances

To render multiple GeoGebra instances it is necessary to give every instance an individual 'id' prop.

<Geogebra id="app1" />
<Geogebra id="app2" />

Props and Parameters

Default Props

Geogebra.defaultProps = {
  appName: 'classic',
  width: 800,
  height: 600,
  showToolBar: true,
  showAlgebraInput: true,
  showMenuBar: true,

Added Props

  LoadComponent={() => <h1>Loading</h1>}
Prop Type Description
debug boolean true: additional logs in console
reloadOnPropChange boolean true: every prop change fires a rerender of the applet
onReady ()=>void is called after appletOnLoad
LoadComponent ()=>JSX.Element is shown before the applet gets injected into the DOM

GeoGebra Props

A list of the GeoGebra props is available at the GeoGebra-website.

GeoGebra App API

To interact with the embedded GeoGebra app you can use the GeoGebra-API. A Basic example with one Button and one event listener is given in the 'examples' folder. U can take a look at it here.

Geogebra App Object

To interact with the embedded GeoGebra app you use the applet object. You can save the object in a variable as soon as the GeoGebra app is completely loaded. Otherwise the applet object will be undefined. You can define a function and give a reference to the 'appletOnLoad' prop. This function is called as soon as the GeoGebra App is completely loaded.

function afterAppIsLoaded(){
    //This function will be called after the GeoGebra App is completly loaded.
<Geogebra appletOnLoad={afterAppIsLoaded}>

The name of the applet object depends on the 'id' prop of the <Geogebra> component. If no 'id' prop is given, you can get the applet object as shown below:

const app = window.ggbApplet;

If an 'id' prop is given:

<Geogebra id="app1" />
const app = window.app1;

Multiple Geogebra App Objects

Multiple applet objects can be stored in variables as shown below:

<Geogebra id="app1" />
<Geogebra id="app2" />
const app1 = window.app1;
const app2 = window.app2;

Evaluating GeoGebra commands

To bind a command (for example creating a Point at specific coordinates) to a button you can create an onClickHandler:

function onClickHandler(){
    const xCoord = 0.4;
    const yCoord = -1;
    const app = window.ggbApplet;
    //Check the GeoGebra API to get more information about evalCommand
 <button type="button" onClick={onClickHandler}>
        Set 'A'

Be sure to not call the onClickHandler before the GeoGebra App is loaded.

Register Listeners

The GeoGebra App can call functions whenever an event occurs. To register event listeners you use the 'appletOnLoad' prop:

  function onEvent() {
    const app = window.ggbApplet;
    console.log(`Position A: (${app.getXcoord('A')},${app.getYcoord('A')})`);

  function registerGeogebraListener() {
    const app = window.ggbApplet;
    app.registerUpdateListener(onEvent); //for more information check the GeoGebra API
    console.log('Geogebra Listener registered');

Known Bugs

  • hot reload doesn't work properly (create-react-app)
  • "Object related" event listeners don't work


Check out the GeoGebra license agreement on their webpage.

Support Me?

just buy me a coffee ☕️
Buy Me A Coffee

The tutorial used to deploy and publish the package can be found here.
I hope you are going to enjoy react-geogebra in your projects 👩‍💻👨‍💻🧑‍💻.