Skip to content
Orbit CSS radial UI composer

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://unpkg.com/@zumer/orbit@latest/dist/orbit.css">
  <script src="https://unpkg.com/@zumer/orbit@latest/dist/orbit.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

Terminal window
npm install @zumer/orbit

Configure React to mount Orbit web components

One way to ensure React recognizes Orbit web components (o-arc, o-progress) is to include them in a script tag.

import '@zumer/orbit/dist/orbit.css'
import orbit from '@zumer/orbit/dist/orbit.js'


export default function App() {
return (
   <div>
      <div class="bigbang">
      <!--your orbit code ...-->
      </div>
      <!--Add orbit components ...-->
      <script src={orbit}></script>
   </div>
  )
}

3. Playground: using Orbit in React