React

Vibe Flags ships a dedicated React integration under @vibe-flags/core/react. It provides wrapper components and a reactive hook.

Installation

npm install @vibe-flags/core

React 18 or 19 is required as a peer dependency.

Quick start

import { VibeFlagsToolbar, VibeFlagsBoolean } from "@vibe-flags/core/react";
 
function App() {
  return (
    <>
      <VibeFlagsBoolean name="showBanner" description="Welcome banner" default={true}>
        <div className="banner">Welcome to the beta!</div>
      </VibeFlagsBoolean>
 
      <VibeFlagsToolbar />
    </>
  );
}

Components

`VibeFlagsBoolean`

React wrapper for <vibe-flags-boolean>. Self-registers the flag and renders children when the flag value matches.

Prop	Type	Default	Description
`name`	`string`	required	Unique flag key
`description`	`string`	`''`	Label shown in toolbar
`value`	`string`	`''`	Expected value to show children
`default`	`boolean`	`false`	Initial value

<VibeFlagsBoolean name="darkMode" description="Dark Mode" default={false}>
  <style>{`body { background: #1a1a1a; color: #fff; }`}</style>
</VibeFlagsBoolean>

`VibeFlagsSelect` and `VibeFlagsOption`

React wrappers for <vibe-flags-select> and <vibe-flags-option>.

VibeFlagsSelect props:

Prop	Type	Default	Description
`name`	`string`	required	Unique flag key
`description`	`string`	`''`	Label shown in toolbar
`default`	`string`	first option	Default selection

VibeFlagsOption props:

Prop	Type	Description
`value`	`string`	Option identifier — children shown when active

import { VibeFlagsSelect, VibeFlagsOption } from "@vibe-flags/core/react";
 
<VibeFlagsSelect name="theme" description="Color theme" default="light">
  <VibeFlagsOption value="light">
    <style>{`:root { --bg: #fff; --text: #111; }`}</style>
  </VibeFlagsOption>
  <VibeFlagsOption value="dark">
    <style>{`:root { --bg: #111; --text: #fff; }`}</style>
  </VibeFlagsOption>
</VibeFlagsSelect>

`VibeFlagsToolbar`

Renders the floating toolbar. No props required.

<VibeFlagsToolbar />

Hook: `useVibeFlags`

Subscribe to a flag value inside any component. The component re-renders automatically when the flag changes.

If the flag is already registered (by a component or vibeFlagsStore.register), subscribe by key:

import { useVibeFlags } from "@vibe-flags/core/react";
 
function App() {
  const darkMode = useVibeFlags("darkMode");
  return <div style={{ background: darkMode ? "#1a1a1a" : "#fff" }}>...</div>;
}

Pass a config object to register the flag and subscribe in one step:

const darkMode = useVibeFlags({ key: "darkMode", type: "boolean", default: false });
 
const theme = useVibeFlags({
  key: "theme",
  type: "select",
  options: ["light", "dark", "auto"],
  default: "light",
});

Signature

// Subscribe to an already-registered flag
useVibeFlags(key: string): VibeFlagsValue | undefined
 
// Register and subscribe
useVibeFlags(config: VibeFlagsConfig): VibeFlagsValue

Imperative registration

Use vibeFlagsStore.register() to register flags at app startup before any component mounts:

import { vibeFlagsStore } from "@vibe-flags/core";
 
vibeFlagsStore.register({ key: "darkMode", type: "boolean", default: false });
vibeFlagsStore.register({
  key: "theme",
  type: "select",
  options: ["light", "dark", "auto"],
  default: "light",
});

This is useful for flags that need to exist before React renders, or for flags managed entirely through the imperative API.

On this page