API: @mrbd/react

Install:

npm install @mrbd/react @mrbd/core

Components

MrbdViewport renders a fixed 600x600 container with safe default styles.

import { MrbdViewport } from "@mrbd/react";

export function App() {
  return <MrbdViewport>Content</MrbdViewport>;
}

MrbdButton renders a focusable button with an 88 px minimum target height and the .mrbd-focusable class.

Hooks

useDpadNavigation(options?) attaches a keydown listener for Arrow keys, Enter, and Escape.

useDpadNavigation({
  loop: true,
  onBack: () => console.log("back"),
});

useMrbdSensors() exposes orientation, motion, error, active, start(), and stop().

useMrbdLocation() exposes result, loading, and getCurrentPosition().

useMetaRayBanDisplayRequest(headers) returns whether the supplied request headers identify the Meta Ray-Ban Display browser.

Head keyboard

MrbdKeyboardProvider + useMrbdTextInput() provide a head-aimed, predictive text-input overlay. Wrap the app in the provider, then const text = await requestText({ title }) resolves with the typed string (or null if cancelled). For the common case, enable autoBind **on the glasses only** so native <input>/<textarea> fields open the keyboard automatically — this is how the create-mrbd-app template wires it. The wearer aims with head orientation and pinches to type, or **pinch-and-holds to swipe whole words** (glide across the letters, pinch to finish, swipe left/right to pick a different match). See Head Keyboard for the full guide.

Also exported: MrbdHeadKeyboard (controlled surface), MrbdInput / MrbdTextArea and useMrbdKeyboardField() (per-field opt-in), useMrbdHeadPointer, createMrbdHeadPointer, createMrbdPredictionEngine, createMrbdSwipeDecoder, MRBD_DEFAULT_WORDLIST, MRBD_DEFAULT_KEYBOARD_LAYOUT, and MRBD_NUMERIC_KEYBOARD_LAYOUT.

The head pointer ships with smoothing tuned for the glasses by default (minCutoff 0.4, beta 0.02); override per app via the provider's config. The default swipe decoder is enabled automatically — pass swipeDecoder to customize the vocabulary/tuning, or swipeDecoder={null} to disable swiping.

The React package has a peer dependency on React and depends on @mrbd/core.