@uniformdev/toolbar-react (experimental)

The Uniform toolbar for React and Next.js: a floating widget showing the live visitor profile — every scored dimension, quirks, the A/B tests on the page with one-click variant forcing — plus an opt-in visitor simulator.

npm i @uniformdev/toolbar-react

Use

'use client';

import { useUniformContext } from '@uniformdev/context-react';
import { UniformToolbar } from '@uniformdev/toolbar-react';

export function Toolbar() {
  const { context } = useUniformContext();
  return <UniformToolbar context={context} simulator />;
}

Render it anywhere in the tree — it produces no markup of its own; the widget is appended to document.body.

Next.js: it must be a client component ('use client', already declared inside the package). It is inert during SSR, so it is safe to render from a server-rendered tree. A typical placement is in the root layout, next to <UniformContext>:

<UniformContext context={context}>
  {children}
  <Toolbar />
</UniformContext>

Prefer a hook? useUniformToolbar({ context, simulator }) does the same thing.

Props

| Prop | Default | What it does | | ------------- | ------- | --------------------------------------------------------------------- | | context | — | The Uniform Context to inspect. undefined is fine while it resolves | | simulator | false | Offers the visitor simulator (see below) | | quirkGroups | [] | Curated quirk groupings, in render order | | labels | — | Resolves display names without connecting to Uniform | | enabled | true | Set false to leave it unmounted, e.g. in production |

Inspecting vs simulating

The widget opens read-only. simulator only offers the mode: hovering the launcher reveals a sliders button, and clicking it switches to simulation. The panel inverts its colours, retitles itself Experience Simulator and offers an Exit button — scores and quirks become editable and a toolbar appears for the control group and reverting.

Leaving simulation does not revert the profile you built. That is deliberate: simulate a visitor, then leave the mode and watch how the app behaves for them.

What it does

Everything the Angular widget does, because it is the same widget — this package is a thin adapter over the framework-neutral custom element in @uniformdev/toolbar-element. See @uniformdev/toolbar for the behaviour and its caveats (aggregates are not editable, only tests rendered on the page can be listed, connecting holds an API key in the browser).