BlogPricingDashboardGitHubGitHub★ 520
Features

Feature Flags

Feature flags allow you to control feature rollouts and conduct A/B testing without deploying new code. Enable or disable features instantly from your dashboard.

Quick Start

app.tsxtsx
'use client';

import { FlagsProvider, useFlags } from '@databuddy/sdk/react';

function App() {
return (
  <FlagsProvider
    clientId="your-client-id"
    apiUrl="https://api.databuddy.cc"
    user={{
      userId: "user-123",
      email: "user@example.com"
    }}
  >
    <MyComponent />
  </FlagsProvider>
);
}

function MyComponent() {
const { isEnabled } = useFlags();

const showNewFeature = isEnabled('new-feature');

return (
  <div>
    {showNewFeature && <NewFeature />}
    <button>Click me</button>
  </div>
);
}

Flag Types

Boolean Flags

Simple on/off switches for features.

tsx
const showFeature = isEnabled('my-feature');

Rollout Flags

Gradually roll out features to a percentage of users.

tsx
// Set rollout percentage in dashboard (e.g., 25%)
const showNewUI = isEnabled('new-ui-rollout');

Configuration

provider.tsxtsx
<FlagsProvider
clientId="your-website-id"
apiUrl="https://api.databuddy.cc"
user={{
  userId: currentUser.id,
  email: currentUser.email
}}
debug={process.env.NODE_ENV === 'development'}
>
<App />
</FlagsProvider>

Hook API

tsx
const { isEnabled, fetchAllFlags, refresh } = useFlags();

// Check if flag is enabled
const showFeature = isEnabled('my-feature');

// Refresh all flags
await fetchAllFlags();

User Targeting

Target specific users or groups from your dashboard:

  • User ID: Target specific users
  • Email: Target by email or domain
  • Properties: Target by custom user properties
tsx
<FlagsProvider
user={{
  userId: "user-123",
  email: "user@example.com",
  properties: {
    plan: 'premium',
    region: 'us-east'
  }
}}
>

Debug Mode

tsx
<FlagsProvider
debug={true}
// ... other props
>

Enable debug mode to see flag evaluation in the browser console.

Ready to get started? Create your first feature flag in the dashboard →

Edit on GitHub