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
OmniFlagsProvider. This triggers the initial snapshot fetch and makes the flag client available to all descendant components via context.// 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>
);
}
'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
Program.cs. AddOmniFlags registers a hosted service that fetches the initial snapshot at startup — flags are ready before the application begins accepting traffic.// 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
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
