React (Official SDK)

import { useFlag, useFlags } from "@basestack/flags-react/client";

export function FeatureShowcase() {
  const headerFlag = useFlag<{ variant: string }>("header");
  const footerFlag = useFlag("footer");
  const { flags, isLoading } = useFlags();

  return (
    <div>
      <h2>Individual Flags</h2>
      <p>Header: {headerFlag.enabled ? "Enabled" : "Disabled"}</p>
      <p>Footer: {footerFlag.enabled ? "Enabled" : "Disabled"}</p>

      <h2>All Flags</h2>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {flags.map((flag) => (
            <li key={flag.slug}>
              {flag.slug}: {flag.enabled ? "enabled" : "disabled"}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

import { useFlag } from "@basestack/flags-react/client";

export function ConditionalFeature() {
  const { enabled, payload } = useFlag<{ theme: string }>("new-ui");

  if (!enabled) {
    return <OldUI />;
  }

  return <NewUI theme={payload?.theme} />;
}

import { useFlagsClient } from "@basestack/flags-react/client";
import { useEffect, useState } from "react";
import type { Flag } from "@basestack/flags-react";

export function AdvancedUsage() {
  const client = useFlagsClient();
  const [flag, setFlag] = useState<Flag | null>(null);

  useEffect(() => {
    async function fetchFlag() {
      const result = await client.getFlag("header");
      setFlag(result);
    }
    fetchFlag();
  }, [client]);

  return flag ? <div>Flag: {flag.slug}</div> : <div>Loading...</div>;
}

import { useFlag } from "@basestack/flags-react/client";

export function ErrorHandling() {
  const { enabled, error, isLoading } = useFlag("header");

  if (error) {
    return (
      <div>
        <p>Failed to load feature flag: {error.message}</p>
        <p>Falling back to default behavior...</p>
        {/* Render default UI */}
      </div>
    );
  }

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return <div>Feature is {enabled ? "enabled" : "disabled"}</div>;
}

import type { FeatureFlagModalsConfig } from "@basestack/flags-react/client";

export const flagsWcConfig: FeatureFlagModalsConfig = {
  preview: {
    theme: "light",
    heading: "Feature Preview",
    subtitle: "Select and enable previews that fit your workflow.",
    selectionPrompt: "Choose a preview to view",
    selectionPlaceholder: "Select a feature to see details.",
    enableLabel: "Enable",
    enabledLabel: "Disable",
    loadingLabel: "Loading feature previews...",
    emptyLabel: "No feature previews are currently available.",
    previewBadgeLabel: "Preview",
    expiresSoonLabel: "Expiring soon",
    learnMoreLabel: "Learn more",
    // apiEndpoint?: defaults to `${baseURL}/flags/preview`
    // projectKey?: defaults to FlagsProvider config.projectKey
    // environmentKey?: defaults to FlagsProvider config.environmentKey
  },
  feedback: {
    theme: "light",
    heading: "Feedback",
    moodPrompt: "How did this feature make you feel?",
    ratingPrompt: "How would you rate this feature?",
    feedbackLabel: "Your feedback",
    feedbackPlaceholder: "Share your thoughts...",
    submitLabel: "Submit Feedback",
    privacyPolicyUrl: "https://basestack.co/legal/privacy",
    privacyPolicyLabel:
      "Please avoid adding sensitive/personal information.",
    privacyPolicyLinkLabel: "More details",
    // apiEndpoint?: defaults to `${baseURL}/flags/preview/feedback`
    // projectKey/environmentKey also fallback to provider values
  },
};

"use client";

import type { ReactNode } from "react";
import type { Flag } from "@basestack/flags-react";
import {
  FlagsProvider,
  FeatureFlagModalsProvider,
} from "@basestack/flags-react/client";
import { flagsConfig } from "@/libs/feature-flags/flags-config";
import { flagsWcConfig } from "@/libs/feature-flags/flags-wc-config";

export function Providers({
  children,
  initialFlags,
}: {
  children: ReactNode;
  initialFlags?: Flag[];
}) {
  return (
    <FlagsProvider
      config={flagsConfig}
      initialFlags={initialFlags}
      preload={!initialFlags?.length}
    >
      <FeatureFlagModalsProvider
        config={flagsWcConfig}
        onError={(err) => console.error("[FeatureFlagModals]", err)}
      >
        {children}
      </FeatureFlagModalsProvider>
    </FlagsProvider>
  );
}

"use client";

import { useFeatureFlagModals } from "@basestack/flags-react/client";

export function FeatureControls() {
  const { ready, error, openPreviewModal, openFeedbackModal } =
    useFeatureFlagModals();

  if (error) return <p>Modals unavailable: {error.message}</p>;

  return (
    <>
      <button onClick={openPreviewModal} disabled={!ready}>
        Open feature preview modal
      </button>

      <button
        onClick={() =>
          openFeedbackModal("command-palette", {
            featureName: "Command Palette", 
            metadata: {
              userId: "usr_0012",
              subscription: "lite",
              openedFrom: "home-page-command-palette",
              context: { locale: "en-US" },
            },
          })
        }
        disabled={!ready}
      >
        Leave feedback
      </button>
    </>
  );
}

"use client";

import { useFlag } from "@basestack/flags-react/client";

export function HeaderFeature() {
  const { enabled, payload, isLoading, openFeedbackModal } = useFlag<{
    variant?: string;
  }>("header");

  if (isLoading) return <p>Checking feature flags...</p>;

  return (
    <section>
      <p>Header is {enabled ? "enabled" : "disabled"}</p>
      <pre>{JSON.stringify(payload, null, 2)}</pre>

      {enabled && (
        <button
          onClick={() =>
            openFeedbackModal({
              featureName: "Header",
              metadata: {
                userId: "usr_0012",
                subscription: "lite",
                openedFrom: "home-page-command-palette",
                context: { locale: "en-US" },
              },
            })
          }
        >
          Leave feedback for this feature
        </button>
      )}
    </section>
  );
}

// In main.tsx (Pass to FlagsProvider)
// In case of network error, and API is down, the app will still work with an empty array of flags. (Use the fallback option to provide a default value)
// For more control check the provided Hooks documentation.
const initialFlags = await fetchFlags(flagsConfig);

// With fallback and onError
const initialFlags = await fetchFlags(flagsConfig, undefined, {
  // If Basestack API is down, use this fallback 
  fallback: [
    {
      slug: "header",
      enabled: true,
      createdAt: new Date(),
      updatedAt: new Date(),
      description: "",
    },
  ],
  onError: (error) => {
    console.error("Failed to load flags", error);
  },
});

// Preload specific flags (Optional)
// This disabled automatic preloading of all flags for your project
const flags = await fetchFlags(flagsConfig, ["footer", "header"]);

const { payload } = useFlag<{ variant: string; color: string }>("header");
// payload is now typed as { variant: string; color: string } | undefined

const { enabled, isLoading } = useFlag("header");

if (isLoading) return <LoadingSpinner />;

const { enabled, error } = useFlag("header");
const isEnabled = error ? false : enabled; // Fallback to false on error

const flagsConfig: SDKConfig = {
  // ... other config
  cache: {
    enabled: true,
    ttl: 10 * 60 * 1000, // 10 minutes
    maxSize: 50, // Max 50 cached flags
  },
};

const { enabled } = useFlag("header");
const expensiveValue = useMemo(() => {
  // Expensive computation based on enabled
  return computeSomething(enabled);
}, [enabled]);