Setting up OpenBridge with React

Install

npm install @oicl/openbridge-webcomponents @oicl/openbridge-webcomponents-react

Global setup

In your entry file (e.g. src/main.tsx):

import '@oicl/openbridge-webcomponents/dist/openbridge.css';

Set the theme attribute on the root HTML element and the size class on body:

<html data-obc-theme="day">
  <body class="obc-component-size-regular">
    <div id="root"></div>
  </body>
</html>

Load Noto Sans via Google Fonts or self-host.

Vite — required `resolve.dedupe`

The @lit/react wrappers expect a single React instance. Without this, Vite can load React twice in dev (one for your app, one for the wrapper subtree), producing Invalid hook call: useRef is null. Add to vite.config.ts:

export default defineConfig({
  // ...
  resolve: {
    dedupe: ['react', 'react-dom'],
  },
});

First render

Import paths use kebab-case file names (not the PascalCase component name). Pattern: @oicl/openbridge-webcomponents-react/<group>/<kebab>/<kebab>.js.

import { ObcSlider } from '@oicl/openbridge-webcomponents-react/components/slider/slider.js';

export default function App() {
  return <ObcSlider min={0} max={100} value={50} />;
}

Types and enums

The React wrapper does not re-export types and enums. Import from the vanilla package:

import type { Alert } from '@oicl/openbridge-webcomponents/dist/components/alert-menu-item/alert-menu-item.js';
import { AlertType } from '@oicl/openbridge-webcomponents/dist/components/alert-menu-item/alert-menu-item.js';
import { InstrumentState } from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
import { Priority } from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';

Event handlers

React wrappers expose camelCased on<Event> props; event detail is on event.detail:

<ObcSlider
  value={value}
  onValue={(e) => setValue(e.detail.value)}
/>

Theme switching

Flip data-obc-theme via plain DOM:

document.documentElement.dataset.obcTheme = 'night';

Valid themes: day, dusk, night, bright.

React

On this page