BeamFeature flags for the frontend powered by Laravel Pennant

Quick Start ​

Install the package, then choose the style you prefer. You can instantiate Beam directly or use the singleton via beam().

import { Beam, beam } from '@beacon-hq/beam';

window.Beam = new Beam();
const active = await window.Beam.active('new-ui');

// OR: use the singleton
const val = await beam().value<string>('experiment', 'control');

import { useFeatureFlag } from '@beacon-hq/beam/react';

function Component() {
    const { status, value, loading } = useFeatureFlag<string>('experiment', { defaultValue: 'control' });
    if (loading) return <span>Loading…</span>;
    return <div>{status ? `Variant: ${value}` : 'Feature Off'}</div>;
}

<script setup lang="ts">
import { useFeatureFlag } from '@beacon-hq/beam/vue';
const { status, value, loading } = useFeatureFlag<string>('experiment', { defaultValue: 'control' });
</script>

<template>
    <span v-if="loading">Loading…</span>
    <div v-else>
        <template v-if="status">Variant: {{ value }}</template>
        <template v-else>Feature Off</template>
    </div>
</template>

Installation ​

npm install @beacon-hq/beam
# or
pnpm add @beacon-hq/beam
# or
yarn add @beacon-hq/beam

What is Beam? ​

Beam is a small TypeScript library for fetching and using Laravel Pennant feature flags in your frontend. It exposes a minimal core SDK and thin adapters for React and Vue.

• Core: query flags from your backend with methods active, inactive, value, and get; includes in-memory caching and request timeouts.
• React: useFeatureFlag hook returning { featureFlag, status, value, loading, refresh }.
• Vue: useFeatureFlag composable returning the same shape as React.