Quickstart

1. Create a flag

Navigate to your project in the OmniFlags dashboard.
Click New flag. Set the key (e.g. charge-delivery-fee), type (Boolean), and category (Release).
In the Targeting tab, enable the flag and set rollout to 100%.

Flag keys are scoped to their project. The SDK key you reference in code is {projectKey}.{flagKey}, for example checkout.charge-delivery-fee.

2. Copy your SDK key

Go to Settings → Environments and copy the SDK key for the environment you’re targeting. SDK keys are environment-scoped. Use separate keys for development, staging, and production.

sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx   ← production
sk_dev_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx   ← development

3. Install and initialise the SDK

React (Vite / CRA)
Next.js
React Native
.NET

npm install @omniretail/omniflags-react

Wrap your app root with OmniFlagsProvider. It fetches the flag snapshot and makes the client available to all descendant components.

// main.tsx
import { createRoot } from 'react-dom/client';
import { OmniFlagsProvider } from '@omniretail/omniflags-react';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <OmniFlagsProvider sdkKey="sk_live_...">
    <App />
  </OmniFlagsProvider>
);

npm install @omniretail/omniflags-react

OmniFlagsProvider uses React context and must run on the client. Create a wrapper component and add it to your root layout:

// components/omniflags-provider.tsx
'use client';

import { OmniFlagsProvider } from '@omniretail/omniflags-react';

export function OmniFlagsClientProvider({ children }: { children: React.ReactNode }) {
  return (
    <OmniFlagsProvider sdkKey={process.env.NEXT_PUBLIC_OMNIFLAGS_SDK_KEY!}>
      {children}
    </OmniFlagsProvider>
  );
}

// app/layout.tsx
import { OmniFlagsClientProvider } from '@/components/omniflags-provider';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <OmniFlagsClientProvider>
          {children}
        </OmniFlagsClientProvider>
      </body>
    </html>
  );
}

Any component that calls a flag hook must be a Client Component ('use client').

npm install @omniretail/omniflags-react-native @react-native-async-storage/async-storage

OmniFlagsProvider seeds from AsyncStorage synchronously on mount (no flicker) and fetches a fresh snapshot in the background.

// App.tsx
import { OmniFlagsProvider } from '@omniretail/omniflags-react-native';

export default function App() {
  return (
    <OmniFlagsProvider sdkKey="sk_live_...">
      <RootNavigator />
    </OmniFlagsProvider>
  );
}

dotnet add package OmniFlags.Sdk

Register the SDK in Program.cs. AddOmniFlags registers a hosted service that loads the snapshot at startup, so flags are ready before the first request arrives.

// Program.cs
builder.Services.AddOmniFlags(options =>
{
    options.SdkKey = builder.Configuration["OmniFlags:SdkKey"]
        ?? throw new InvalidOperationException("OmniFlags:SdkKey is required.");
});

// appsettings.json
{
  "OmniFlags": {
    "SdkKey": "sk_live_..."
  }
}

4. Evaluate your flag

React
React Native
.NET

import { useFlag } from '@omniretail/omniflags-react';

function CheckoutButton({ customerId }: { customerId: string }) {
  const chargeDeliveryFee = useFlag('checkout.charge-delivery-fee', { customerId });

  return (
    <Button>
      {chargeDeliveryFee ? 'Proceed to payment' : 'Continue — free delivery'}
    </Button>
  );
}

import { useFlag } from '@omniretail/omniflags-react-native';

function CheckoutScreen({ customerId }: { customerId: string }) {
  const chargeDeliveryFee = useFlag('checkout.charge-delivery-fee', { customerId });

  return (
    <View>
      <Text>{chargeDeliveryFee ? 'Delivery fee applies' : 'Free delivery'}</Text>
    </View>
  );
}

app.MapPost("/checkout/initiate", (
    CheckoutRequest req,
    OmniFlagsClient flags) =>
{
    var ctx = new EvaluationContext { CustomerId = req.CustomerId };
    var chargeDeliveryFee = flags.IsEnabled("checkout.charge-delivery-fee", ctx);

    var order = new Order
    {
        DeliveryFee = chargeDeliveryFee ? CalculateFee(req) : 0m,
    };

    return Results.Ok(order);
});

Next steps

Configure targeting rules to roll out to specific users or segments.
Use traffic splits to A/B test multiple values.
Read the evaluation reference to understand exactly how the SDK resolves a flag value.

Get Started

SDKs

Concepts

1. Create a flag

2. Copy your SDK key

3. Install and initialise the SDK

4. Evaluate your flag

Next steps

​1. Create a flag

​2. Copy your SDK key

​3. Install and initialise the SDK

​4. Evaluate your flag

​Next steps

1. Create a flag

2. Copy your SDK key

3. Install and initialise the SDK

4. Evaluate your flag

Next steps