bare-bone-flags
v1.0.0
Published
A simple React context-based feature flags system
Maintainers
selfteachmeReadme
Feature Flags
A simple React context-based feature flags system for managing feature toggles in your application.
Installation
npm install bare-bone-flagsUsage
Basic Setup
First, extend the FeatureFlags interface with your own flags by using module augmentation:
// types/feature-flags.d.ts
import "bare-bone-flags";
declare module "bare-bone-flags" {
interface FeatureFlags {
newDashboard: boolean;
betaFeature: boolean;
darkMode: boolean;
}
}Wrap your app with the provider
import { FeatureFlagsProvider } from "bare-bone-flags";
function App() {
return (
<FeatureFlagsProvider
flags={{
newDashboard: true,
betaFeature: false,
darkMode: true,
}}
>
<YourApp />
</FeatureFlagsProvider>
);
}Use flags in your components
import { useFeatureFlags } from "bare-bone-flags";
function Dashboard() {
const { newDashboard } = useFeatureFlags();
return newDashboard ? <NewDashboard /> : <OldDashboard />;
}Next.js App Router
The package includes "use client" directive and works with Next.js 13+ App Router:
// app/providers.tsx
"use client";
import { FeatureFlagsProvider } from "bare-bone-flags";
export function Providers({ children }: { children: React.ReactNode }) {
return (
<FeatureFlagsProvider
flags={{
newDashboard: true,
betaFeature: false,
}}
>
{children}
</FeatureFlagsProvider>
);
}// app/layout.tsx
import { Providers } from "./providers";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}API
FeatureFlagsProvider
Props:
children: ReactNode (required)flags: Partial (optional) - Your feature flags
useFeatureFlags()
Returns the current feature flags object.
License
MIT