OMD | React Example Setup

Note: The React example cannot be run directly in the browser like the other HTML examples. It requires a build step to compile the JSX code.

Project Structure & Code

Explore the key files needed to integrate OMD into a React application.

src/App.jsx

import { useEffect, useRef } from 'react';
import { omdDisplay, omdNumberLine } from '@teachinglab/omd';

function App() {
  const equationRef = useRef(null);
  const numberLineRef = useRef(null);

  useEffect(() => {
    // 1. Render an Equation
    // We use a ref to tell OMD where to mount the SVG
    const display = new omdDisplay(equationRef.current);
    display.render("x^2 + 3x + 2 = 0");

    // 2. Create and Render a Visualization (Number Line)
    const numberLine = new omdNumberLine();
    numberLine.loadFromJSON({
      min: -5,
      max: 10,
      dotValues: [4]
    });
    
    const numberLineDisplay = new omdDisplay(numberLineRef.current);
    numberLineDisplay.load(numberLine);

    // Example: Updating the visualization dynamically
    // numberLine.addNumberDot(7);
    // numberLineDisplay.load(numberLine);
  }, []);

  return (
    <div style={{ padding: '2rem' }}>
      <h1>OMD React Demo</h1>
      <div ref={equationRef}></div>
      <div ref={numberLineRef} style={{ marginTop: '2rem' }}></div>
    </div>
  );
}

export default App;

src/main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    // Ensure mathjs and openai are pre-bundled if needed
    include: ['mathjs', 'openai'],
    // Exclude OMD from optimization to ensure proper loading of its internal modules
    exclude: ['@teachinglab/omd', '@teachinglab/jsvg']
  }
});

package.json

{
  "name": "react-demo",
  "version": "1.0.0",
  "type": "module",
  "dependencies": {
    "@teachinglab/jsvg": "^0.1.1",
    "@teachinglab/omd": "^0.6.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.2.1",
    "vite": "^5.0.0"
  }
}

How to Run

To run the React demo, you need to start the development server using Node.js.

1. Open a Terminal

Navigate to the react-demo directory:

cd react-demo

2. Install Dependencies

npm install

3. Start the Server

npm run dev

Once the server starts, open the URL shown in the terminal (usually http://localhost:5173).

Why is this necessary?

React uses JSX (JavaScript XML) to write HTML-like syntax in JavaScript. Browsers cannot understand JSX directly; it must be "transpiled" into standard JavaScript using a tool like Vite or Webpack.

The other examples in this library use standard HTML and JavaScript modules, which modern browsers can run natively.