React

Orbit is HTML and CSS with a runtime that watches the page, so in React you write the same markup with className. There is no wrapper component to install.

Install

npm install @zumer/orbit

Import the stylesheet and the runtime once, in your entry file or in the component that uses Orbit:

import '@zumer/orbit/style';
import '@zumer/orbit';

A gauge

A progress ring with its value in the middle, bound to state. value on <o-progress> is an attribute, and React sets it like any other.

import { useState } from 'react';
import '@zumer/orbit/style';
import '@zumer/orbit';
import './gauge.css';

export default function Gauge() {
  const [value, setValue] = useState(72);
  return (
    <div className="gauge">
      <div className="bigbang">
        <div className="gravity-spot">
          <div className="orbit-10">
            <o-progress value={value} shape="rounded"></o-progress>
          </div>
          <div className="orbit-0">
            <div className="satellite at-center">
              <div className="capsule">{value}%</div>
            </div>
          </div>
        </div>
      </div>
      <input type="range" min="0" max="100" value={value}
        onChange={(e) => setValue(Number(e.target.value))} />
    </div>
  );
}

/* gauge.css */
.gauge { width: 220px; }
.gauge .orbit-10 { --o-size-ratio: 2; }
.gauge .orbit-0 { --o-size-ratio: 12; }
.gauge o-progress {
  --o-fill: var(--o-cyan);
  --o-back-fill: var(--o-cyan-lighter);
  --o-stroke: none;
}
.gauge .capsule { font-size: 28px; font-weight: 600; }

Sizes go in CSS rather than in style, so TypeScript does not complain about custom properties. Lists work as you expect: render satellites with map() and Orbit spreads however many there are.

Orbit watches the page for added, removed and reordered elements, attribute and style changes, and containers that change size, so a re-render needs no extra call. To wait until arcs are drawn, or to update after a change Orbit cannot see, use the runtime API.

TypeScript

The package ships JSX types for <o-arc> and <o-progress>. Load them once, for example in a .d.ts file of your app:

import type {} from '@zumer/orbit/react';

Then <o-progress value={72} shape="rounded" /> is checked like any other element, attributes included.

Server rendering

Importing Orbit on the server is safe; it does nothing there. It has to run in the browser too, to register the elements and watch the page. In the Next.js App Router, import the stylesheet in app/layout.tsx and the runtime in a component marked 'use client'.