# react-geogebra

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

Latest version **1.2.6** (published 2026-04-30) · ISC AND SEE in License-GeoGebra.html license · 0 weekly downloads

## Install

```sh
npm install react-geogebra
pnpm add react-geogebra
yarn add react-geogebra
bun add react-geogebra
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.2.6 |
| Published | 2026-04-30 |
| First published | 2020-11-08 |
| Weekly downloads | 0 |
| License | ISC AND SEE in License-GeoGebra.html |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 36.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Christoph Pfaffmann |
| Maintainers | saunaaa |
| Keywords | react, GeoGebra, math |

## Links

- npm: https://www.npmjs.com/package/react-geogebra
- Repository: https://github.com/pfaffmann/react-geogebra
- Issues: https://github.com/pfaffmann/react-geogebra/issues
- npm.io page: https://npm.io/package/react-geogebra

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.6 (latest) — 2026-04-30
- 1.2.5 — 2023-06-22
- 1.2.4 — 2021-06-01
- 1.2.3 — 2021-05-19
- 1.2.2 — 2021-05-19
- 1.2.1 — 2021-05-04
- 1.2.0 — 2021-03-17
- 1.1.2 — 2021-02-11
- 1.1.1 — 2021-01-29
- 1.1.0 — 2021-01-29
- 1.0.12 — 2020-12-22
- 1.0.11 — 2020-12-22
- 1.0.10 — 2020-12-06
- 1.0.9 — 2020-12-06
- 1.0.8 — 2020-12-06
- … 8 more at https://npm.io/package/react-geogebra/versions

## README

# React GeoGebra Component

Hi Everyone. Welcome to my first published package for [react.js](https://reactjs.org/).
I'm going to show you an easy way to embed [GeoGebra](https://www.geogebra.org/) Maths App to your React project.<br />
This is not an official GeoGebra-project.

[![NPM](https://nodei.co/npm/react-geogebra.png?compact=true)](https://nodei.co/npm/react-geogebra/)

## Demo

Try the demo: https://pfaffmann.github.io/react-geogebra

## Installation

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:

```jsx
import Geogebra from 'react-geogebra';
```

## Basic usage

and use it in your application. For example:

```jsx
...
function App() {
  return (
    <Geogebra
      width="800"
      height="600"
      showMenuBar
      showToolBar
      showAlgebraInput
    />
  );
}
...
```

## Multiple GeoGebra instances

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

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

## Props and Parameters

### Default Props

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

### Added Props

```jsx
<Geogebra
  debug
  onReady={readyHandler}
  LoadComponent={() => <h1>Loading</h1>}
></Geogebra>
```

| 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](https://wiki.geogebra.org/en/Reference:GeoGebra_App_Parameters).

## GeoGebra App API

To interact with the embedded GeoGebra app you can use the [GeoGebra-API](https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_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](https://saunaaa.github.io/react-geogebra).

### 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.

```jsx
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:

```jsx
const app = window.ggbApplet;
```

If an 'id' prop is given:

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

### Multiple Geogebra App Objects

Multiple _applet objects_ can be stored in variables as shown below:

```jsx
<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`:

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

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:

```jsx
  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');
  }
  ...
        <Geogebra
        appName="geometry"
        width="600"
        height="400"
        appletOnLoad={registerGeogebraListener}
      />
```

#### Object related Listener

"Object related" event listeners only work if the object is defined before the listener is registered.

## Known Bugs

- hot reload doesn't work properly (create-react-app)

## License

Check out the GeoGebra license agreement on their webpage. <br>
https://www.geogebra.org/license

## Support Me?

just buy me a coffee ☕️ <br>
<a href="https://www.buymeacoffee.com/saunaaa" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

<hr>

The tutorial used to deploy and publish the package can be found [here](https://medium.com/dailyjs/building-a-react-component-with-webpack-publish-to-npm-deploy-to-github-guide-6927f60b3220). <br>
I hope you are going to enjoy **react-geogebra** in your projects 👩‍💻👨‍💻🧑‍💻.

---
_Source: https://npm.io/package/react-geogebra · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._