Feature Flags

A simple React context-based feature flags system for managing feature toggles in your application.

Installation

``bash
npm install bare-bone-flags
`

Usage

$3

First, extend the FeatureFlags interface with your own flags by using module augmentation:

`typescript
// types/feature-flags.d.ts
import "bare-bone-flags";

declare module "bare-bone-flags" {
interface FeatureFlags {
newDashboard: boolean;
betaFeature: boolean;
darkMode: boolean;
}
}
`

$3

`tsx
import { FeatureFlagsProvider } from "bare-bone-flags";

function App() {
return (
flags={{
newDashboard: true,
betaFeature: false,
darkMode: true,
}}
>


);
}
`

$3

`tsx
import { useFeatureFlags } from "bare-bone-flags";

function Dashboard() {
const { newDashboard } = useFeatureFlags();

return newDashboard ? : ;
}
`

$3

The package includes "use client" directive and works with Next.js 13+ App Router:

`tsx
// app/providers.tsx
"use client";

import { FeatureFlagsProvider } from "bare-bone-flags";

export function Providers({ children }: { children: React.ReactNode }) {
return (
flags={{
newDashboard: true,
betaFeature: false,
}}
>
{children}

);
}
`

`tsx
// app/layout.tsx
import { Providers } from "./providers";

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (


{children}


);
}
`

API

$3

Props:
- children: ReactNode (required)
- flags`: Partial (optional) - Your feature flags

$3

Returns the current feature flags object.

License

MIT