React Router SDK

Requirements

Use React Router framework mode 7 or 8 with React 18+ (React Router 8 requires React ≥19.2.7, Node 22.22+, and Vite 7+). Library/data-mode RouterProvider apps should use the React SDK instead.

The Toggly React Router SDK integrates feature flags with React Router framework-mode apps: route loaders and actions, SSR hydration, and React hooks.

Grab the printable React Router cheat sheet (download PDF) — loaders, actions, SSR hydration, React hooks.

Overview

One package with two entry points:

Entry	Purpose
@ops-ai/react-router-toggly/server	Loaders, actions, and server evaluation
@ops-ai/react-router-toggly/client	Provider, hooks, and components

Installation

npm install @ops-ai/react-router-toggly

Requirements

Host	React	Node	Vite
React Router 7 framework mode	18 or 19	18+ (host-dependent)	5+
React Router 8 framework mode	≥19.2.7	≥22.22	≥7

Quick Start

1. Create a Toggly utility file

app/utils/toggly.server.ts

import { createTogglyLoader } from '@ops-ai/react-router-toggly/server';
import { getSession } from '~/utils/session.server';

export const togglyLoader = createTogglyLoader({
  appKey: process.env.TOGGLY_APP_KEY,
  environment: process.env.TOGGLY_ENVIRONMENT,
  getIdentity: async (request) => {
    const session = await getSession(request.headers.get('Cookie'));
    return session.get('userId');
  },
});

2. Set up the root loader and provider

app/root.tsx

import type { Route } from './+types/root';
import { Outlet } from 'react-router';
import { RouterTogglyProvider } from '@ops-ai/react-router-toggly/client';
import { togglyLoader } from '~/utils/toggly.server';

export async function loader({ request }: Route.LoaderArgs) {
  return togglyLoader.getLoaderData({ request });
}

export default function App() {
  return (
    <RouterTogglyProvider>
      <Outlet />
    </RouterTogglyProvider>
  );
}

3. Use feature flags in components

app/routes/dashboard.tsx

import { useFeature, Feature } from '@ops-ai/react-router-toggly/client';

export default function Dashboard() {
  const showBeta = useFeature('beta-features');

  return (
    <div>
      <h1>Dashboard</h1>
      <Feature featureKey="new-analytics">
        <AdvancedAnalytics />
      </Feature>
      <Feature featureKey="new-analytics" negate>
        <BasicAnalytics />
      </Feature>
      {showBeta && <BetaFeatures />}
    </div>
  );
}

Migrating from Remix

Remix v2 is end-of-life. @ops-ai/remix-toggly-* is deprecated. Replace:

Remix	React Router
@ops-ai/remix-toggly-server	@ops-ai/react-router-toggly/server
@ops-ai/remix-toggly-client	@ops-ai/react-router-toggly/client
RemixTogglyProvider	RouterTogglyProvider
@remix-run/* imports	react-router

Last published Remix packages remain on npm but are not a living support line.

Next Steps

• Server-Side Usage — loaders and actions
• Client-Side Usage — hooks and components
• Configuration — SDK options
• Usage & metrics — server telemetry