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: https://pfaffmann.github.io/react-geogebra
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';and use it in your application. For example:
...
function App() {
return (
<Geogebra
width="800"
height="600"
showMenuBar
showToolBar
showAlgebraInput
/>
);
}
...To render multiple GeoGebra instances it is necessary to give every instance an individual 'id' prop.
<Geogebra id="app1" />
<Geogebra id="app2" />Geogebra.defaultProps = {
appName: 'classic',
width: 800,
height: 600,
showToolBar: true,
showAlgebraInput: true,
showMenuBar: true,
};<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 |
A list of the GeoGebra props is available at the GeoGebra-website.
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.
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 applet objects can be stored in variables as shown below:
<Geogebra id="app1" />
<Geogebra id="app2" />
...
const app1 = window.app1;
const app2 = window.app2;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;
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.
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');
}
...
<Geogebra
appName="geometry"
width="600"
height="400"
appletOnLoad={registerGeogebraListener}
/>"Object related" event listeners only work if the object is defined before the listener is registered.
- hot reload doesn't work properly (create-react-app)
Check out the GeoGebra license agreement on their webpage.
https://www.geogebra.org/license
just 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 👩💻👨💻🧑💻.