08 · Frontend

Does it work with React: components, hooks, and Context?

React is built in. A component compiles to a React function component, JSX lowers to createElement, custom hooks are just functions, and complex state is safer than plain TypeScript.

Why it matters

A lot of the code agents write is React. Glyph treats it as a first-class target, not a bolt-on: component is its own keyword (so grep "^component " audits your whole UI), and hooks work exactly as you'd expect because they're ordinary function calls.

See it

A custom hook is a function that calls hooks. Reducer state gets something React alone can't give you, compile-time exhaustiveness on every action:

counter.glyph: a custom hook + a reducer that can't miss a case
type Action = Inc | Dec | Reset

fn reducer(n: number, a: Action) -> number {
  return match a {
    Inc => n + 1,
    Dec => n - 1,
    Reset => 0,
    // add an Action variant ⇒ this match fails to compile
  }
}

fn use_counter() -> StateHandle<number> {
  return use_reducer(reducer, 0)
}

Add a SetTo(number) action and every reducer that doesn't handle it stops compiling: the bug a plain TypeScript switch would let ship. React Context works today through createContext / useContext, and member-expression element names (<ThemeContext.Provider>) work directly: no workaround.

JSX prop spreading works too: <input {...register("email")} /> lowers to an object spread in the props, so the react-hook-form idiom needs no adapter. Zod's value-derived types are first-class: type FormData = z.infer<typeof schema> works directly, no escape hatch. The one thing that differs: a component takes a single props record, not multiple positional params. See using your libraries and the hardening page for exactly where that boundary is.

Where it stands

Shipping today

Components, JSX, fragments (<>...</>), member-expression element names (<Ctx.Provider>), JSX prop spread ({...register()}), built-in and custom hooks, useReducer with exhaustive tagged-union actions, and Context via createContext/useContext.