React SDK Integration

The ConfigBee React SDK provides a seamless way to integrate feature flags and dynamic configurations into your React applications. It offers React-specific hooks and components that make it easy to manage feature flags in a React-friendly way.

Installation

Install the ConfigBee React SDK using npm or yarn:

npm
yarn

npm install configbee-react

yarn add configbee-react

Setup

Provider Setup

Create a ConfigBee provider component to wrap your application:

"use client"
import React from 'react';
import { CbWrapper } from 'configbee-react';

const ConfigbeeProvider = ({ children }) => {
  return (
    <CbWrapper
      accountId="YOUR_ACCOUNT_ID"
      projectId="YOUR_PROJECT_ID"
      environmentId="YOUR_ENVIRONMENT_ID"
    >
      {children}
    </CbWrapper>
  );
};

export default ConfigbeeProvider;

Integration with Your Application

Wrap your application with the ConfigBee provider:

// src/app/layout.tsx or App.jsx
import React from 'react';
import ConfigbeeProvider from '../providers/configbee-provider';

function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        <ConfigbeeProvider>
          {children}
        </ConfigbeeProvider>
      </body>
    </html>
  );
}

export default Layout;

Available Hooks

Status Hooks

import { useCbStatus, useCbTargetingStatus } from 'configbee-react';

// In your component
const status = useCbStatus(); // Returns: "LOADING", "ACTIVE", "ERROR"
const targetingStatus = useCbTargetingStatus(); // Returns targeting status

Configuration Hooks

ConfigBee React SDK provides specialized hooks for each configuration type:

import {
  useCbFlags,
  useCbNumbers,
  useCbTexts,
  useCbJsons
} from 'configbee-react';

// In your component
const { newFeature, betaAccess } = useCbFlags();
const { maxItems, retryLimit } = useCbNumbers();
const { welcomeMessage, errorText } = useCbTexts();
const { appConfig, userPrefs } = useCbJsons();

Operations Hook

import { useCbOperations } from 'configbee-react';

// In your component
const cbOps = useCbOperations();

// Set targeting properties
cbOps.setTargetProperties({
  userId: "user123",
  plan: "premium"
});

// Clear targeting properties
cbOps.unsetTargetProperties();

Usage Examples

Feature Flag Based Rendering

import React from 'react';
import { useCbStatus, useCbFlags } from 'configbee-react';

const FeatureComponent = () => {
  const status = useCbStatus();
  const { newFeature } = useCbFlags();

  if (status !== "ACTIVE") {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {newFeature ? (
        <div>New Feature UI</div>
      ) : (
        <div>Original Feature UI</div>
      )}
    </div>
  );
};

export default FeatureComponent;

Using Multiple Configuration Types

import React from 'react';
import {
  useCbStatus,
  useCbFlags,
  useCbNumbers,
  useCbTexts,
  useCbJsons
} from 'configbee-react';

const ProductPage = () => {
  const status = useCbStatus();
  const { showReviews } = useCbFlags();
  const { itemsPerPage } = useCbNumbers();
  const { productHeader } = useCbTexts();
  const { featureConfig } = useCbJsons();

  if (status !== "ACTIVE") {
    return <div>Loading configurations...</div>;
  }

  return (
    <div>
      <h1>{productHeader}</h1>
      <ProductList itemsPerPage={itemsPerPage} />

      {showReviews && <ReviewSection config={featureConfig} />}
    </div>
  );
};

User Targeting Example

import React, { useEffect } from 'react';
import { useCbOperations, useCbFlags } from 'configbee-react';

const UserFeatures = ({ user }) => {
  const cbOps = useCbOperations();
  const { premiumFeature, betaFeature } = useCbFlags();

  useEffect(() => {
    if (user) {
      // Set user targeting properties when user logs in
      cbOps.setTargetProperties({
        userId: user.id,
        userType: user.type,
        region: user.region,
        subscriptionTier: user.subscriptionTier
      });
    } else {
      // Clear targeting when user logs out
      cbOps.unsetTargetProperties();
    }
  }, [user, cbOps]);

  return (
    <div>
      {premiumFeature && <PremiumFeature />}
      {betaFeature && <BetaFeature />}
    </div>
  );
};

Full Application Example (Next.js)

import React from 'react';
import {
  useCbStatus,
  useCbFlags,
  useCbNumbers,
  useCbTexts,
  useCbJsons,
} from 'configbee-react';

const Dashboard = () => {
  const status = useCbStatus();
  const { newDashboard, showAnalytics } = useCbFlags();
  const { widgetCount } = useCbNumbers();
  const { welcomeHeading } = useCbTexts();
  const { dashboardConfig } = useCbJsons();

  if (status !== "ACTIVE") {
    return <div className="loading">Loading dashboard configurations...</div>;
  }

  return (
    <div className="dashboard">
      <h1>{welcomeHeading}</h1>

      {newDashboard ? (
        <NewDashboardLayout
          widgetCount={widgetCount}
          config={dashboardConfig}
        />
      ) : (
        <LegacyDashboardLayout />
      )}

      {showAnalytics && <AnalyticsPanel />}
    </div>
  );
};

export default Dashboard;

Best Practices

Centralize Provider Configuration: Keep your ConfigBee configuration in a single provider file.
Handle Loading States: Always check the status before accessing configuration values.
Use TypeScript: For better type safety and autocompletion, add type definitions to your hooks usage.
Provide Default Values: Consider how your app should behave before configurations are loaded.