Get Started in 30 Seconds

Replace your hardcoded feature flags with real, controllable ones

Quick Start

Install the SDK

npm install @flagswift/react-client

Wrap your app

// app/layout.tsx

import { FlagProvider } from '@flagswift/react-client';

export default function Layout({ children }) {
  return (
    <FlagProvider 
      apiKey="your-api-key"
      environment="production"
    >
      {children}
    </FlagProvider>
  );
}

Use in your components

// Replace your old code

const showAbc = useFlag('abc-application');

if (showAbc) {
  return <AbcApplication />;
}

return <ComingSoon />;

Migration from Hardcoded Flags

Your Current Code


const params = new URLSearchParams(window.location.search);
const showAbcApplicationBeta = params.get('showAbcApplicationBeta');

export const mockFeatureFlags = [
  {
    flagKey: 'abc-application',
    user: { id: 'user-222', attributes: { organization: 'sea' } },
    parsed: { showBeta: showAbcApplicationBeta === 'true' },
    provider: 'Launchy', // Not actually Launchy!
  }
];

const isAbcEnabled = useFeatureFlag(mockFeatureFlags, FeatureFlagKeys.ABC_APPLICATION);

FlagSwift


import { useFlag } from '@flagswift/react-client';

function ABCV1Module() {
  const isAbcEnabled = useFlag('abc-application');
  
  return (
    <Box maxWidth="100vw">
      <Switch>
        <Route path="/abc-v1/applications">
          <AbcApplication />
        </Route>
        <Redirect to={isAbcEnabled ? '/abc-v1/applications' : '/abc-v1/all'} />
      </Switch>
    </Box>
  );
}


// Topbar becomes super clean
const Topbar = () => {
  const isAbcEnabled = useFlag('abc-application');
  
  const tabs = [
    { url: '/abc-v1/applications', text: 'Applications', show: isAbcEnabled },
    { url: '/abc-v1/all', text: 'All Abc', show: true }
  ];

  return (
    <Box>
      {tabs.filter(tab => tab.show).map(tab => (
        <TabLink key={tab.url} to={tab.url}>{tab.text}</TabLink>
      ))}
    </Box>
  );
};

Environment Management

Development

New flags are ON by default. Perfect for local testing.

ENVIRONMENT=development

Staging

Test with real data before production release.

ENVIRONMENT=staging

Production

Safe by default. Toggle when ready to launch.

ENVIRONMENT=production

Local Development

Working on Disabled Production Features

Need to work on a feature that's disabled in production? Here are your options:

Method 1: Environment Setting

Set your local environment to development mode

NEXT_PUBLIC_ENVIRONMENT=development

Method 2: Local Override

Override specific flags in browser console

flagClient.setLocalOverride('abc-app', true)

Perfect Developer Workflow

1. Write feature code with useFlag('new-feature')
2. Create flag in dashboard (auto-enabled in dev)
3. Test locally (flag is ON in development)
4. Deploy to production (flag is OFF, feature hidden)
5. Enable in staging for QA testing
6. Toggle ON in production when ready