Beam: Feature Flags for the Frontend with Laravel Pennant

Beam is a feature flags library for the frontend, powered by Laravel Pennant. It features a lightweight footprint, with a simple, promise-based API and great TypeScript types. It also features first-class React hooks and Vue composables.

// Fetch a single flag
import { useFeatureFlag } from '@beacon-hq/beam/react';

export function FeatureGate() {
    const { status, loading, refresh } = useFeatureFlag('new-ui');

    if (loading) return <span>Loading…</span>;
    return (
        <div>
            {status ? 'Feature On' : 'Feature Off'}
            <button onClick={() => refresh()}>Refresh</button>
        </div>
    );
}

/*
`useFeatureFlag` returns:
{ 
    featureFlag: string; 
    status: boolean; 
    value?: any, 
    loading: boolean, 
    refresh: fn () => void 
}
*/

Beam also supports scope and extra dependencies that trigger a refetch when changed:

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

function Profile({ userId }: { userId: number }) {
  const scope = { userId };
  const feature = useFeatureFlag('beta-ui', { deps: [userId] }, scope);
  return feature.status ? <NewUI /> : <LegacyUI />;
}

You can get started with this library by reading the Beam documentation. The source code is available on GitHub at beacon-hq/beam. The frontend library works in tandem with the beacon-hq/pennant-beam Composer dependency.