Integrate Orbit with React

Integrating Orbit with React is simple and can be done in two scenarios: browser-based and Node.js-based projects. Below, you’ll find step-by-step instructions for both.

1. Browser-Based integration

If you’re using React directly in the browser, follow these steps:

Import Orbit files

Add the Orbit CSS and JavaScript files to your HTML file using a CDN. Include React and Babel for JSX support if needed:

<head>
  <!-- React and Babel (for JSX support) -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <!-- Orbit CSS and JS -->
  <link rel="stylesheet" href="https://zumerlab.github.io/orbit-docs/orbit/orbit.min.css">
  <script src="https://zumerlab.github.io/orbit-docs/orbit/orbit.min.js"></script>
</head>

Use Orbit components

Orbit web-components(o-arc, o-progress) are automatically recognized in the browser. You can use them directly in your React code:

<div id="app"></div>

<script type="text/babel">
  function App() {
    return (
      <div className="bigbang">
        <div className="gravity-spot">
          <div className="orbit-5">
            {[...Array(7)].map((_, n) => (
              <o-arc key={n}>{n + 1} - Hello, Orbit!</o-arc>
            ))}
          </div>
        </div>
      </div>
    );
  }

  // Render the component to the DOM
  const container = document.getElementById('app');
  const root = ReactDOM.createRoot(container);
  root.render(<App />);
</script>

2. Node.js-Based integration

If you’re using React in a Node.js environment (e.g., with Create React App or Vite), follow these steps:

Import Orbit files

Install Orbit via npm

npm install @zumer/orbit

Configure React to mount Orbit web components

Load Orbit from the browser entrypoint. For a component that can also render on the server, register it after mounting:

import { useEffect } from 'react';
import '@zumer/orbit/style';

export default function App() {
  useEffect(() => { void import('@zumer/orbit'); }, []);
  return (
    <div className="bigbang">
      <div className="gravity-spot">
        <div className="orbit-6">
          <o-progress value="72"></o-progress>
        </div>
      </div>
    </div>
  );
}

3. Playground: using Orbit in React

Examples include the current Orbit stylesheet and runtime. Get both files for your project.