Ship features with confidence

import { 
  TogglelyProvider, 
  useToggle, 
  useStringToggle,
  useTogglelyState,
  useTogglelyContext 
} from '@togglely/sdk-react';

// Wrap your app with the provider
function App() {
  return (
    <TogglelyProvider
      apiKey={process.env.REACT_APP_TOGGLELY_KEY}
      environment="production"
      baseUrl="https://api.togglely.de"
    >
      <Dashboard />
    </TogglelyProvider>
  );
}

// Use hooks in your components
function Dashboard() {
  // Boolean toggle with default fallback
  const newDashboard = useToggle('new-dashboard', false);
  
  // String toggle
  const theme = useStringToggle('theme', 'light');
  
  // Number and JSON toggles also available
  const limit = useNumberToggle('max-items', 10);
  const config = useJSONToggle('ui-config', {});
  
  // Access ready/offline state
  const { isReady, isOffline } = useTogglelyState();
  
  // Set user context for targeting
  const { setContext } = useTogglelyContext();
  
  useEffect(() => {
    setContext({ userId: currentUser.id, plan: currentUser.plan });
  }, []);

  if (!isReady) return <div>Loading...</div>;
  return newDashboard ? <NewDashboard theme={theme} /> : <OldDashboard />;
}

// Or use the FeatureToggle component
import { FeatureToggle } from '@togglely/sdk-react';

<FeatureToggle toggle="new-dashboard" fallback={<OldDashboard />}>
  <NewDashboard />
</FeatureToggle>