@uniformdev/toolbar-element
v20.73.4
Published
The Uniform toolbar as a framework-neutral custom element, for React, Vue, Svelte or plain script apps
Keywords
Readme
@uniformdev/toolbar-element (experimental)
The Uniform toolbar as a custom element — the same widget as the Angular component, with no framework attached. Works in React, Vue, Svelte, or plain script.
npm i @uniformdev/toolbar-elementUse
All it needs is a Uniform Context instance — whichever SDK produced it.
import { mountUniformToolbar } from '@uniformdev/toolbar-element';
const teardown = mountUniformToolbar({ context, simulator: true });React
import { useUniformContext } from '@uniformdev/context-react';
function Toolbar() {
const { context } = useUniformContext();
useEffect(() => mountUniformToolbar({ context }), [context]);
return null;
}Vue
onMounted(() => {
const teardown = mountUniformToolbar({ context });
onUnmounted(teardown);
});Svelte
<script>
import { onMount } from 'svelte';
onMount(() => mountUniformToolbar({ context }));
</script>mountUniformToolbar returns a teardown function and is a no-op during SSR.
Options
| Option | Default | What it does |
| ------------- | -------------------------- | -------------------------------------------- |
| context | — | The Uniform Context to inspect (required) |
| simulator | false | Makes scores and quirks editable |
| quirkGroups | [] | Curated quirk groupings, in render order |
| labels | — | Resolves display names without connecting to Uniform |
| target | document.body | Where to append the element |
| tagName | uniform-toolbar | Custom element name, if the default collides |
Prefer to place the element yourself? defineUniformToolbar() registers it, then call
element.configure({ context }) on your own instance.
Features
Identical to the Angular widget: every scored dimension (signals, enrichments,
aggregates) with the Uniform dashboard's icons, quirks, not-yet-scored dimensions, the
A/B tests on the page with one-click variant forcing, the visitor simulator, Connect
for friendly names, and "Forget me". See
@uniformdev/toolbar for the
behaviour and its caveats.
Styling
Renders light DOM, not shadow DOM, so the host page can re-theme it:
uniform-toolbar {
--utb-bg: #0b0b0c;
--utb-fg: #f5f5f5;
}The stylesheet is injected into <head> once, scoped under the element name — so it can
coexist with the Angular build on the same page. TOOLBAR_CSS is exported if you would
rather ship it yourself.