React SDK v1.0.0

The react sdk for using Toggle is now v1.0.0 and available for download: https://www.npmjs.com/package/@hyphen/react-sdk

Installation

npm install @hyphen/react-sdk

Higher-Order Component (HOC) Pattern

import { withToggleProvider } from '@hyphen/react-sdk';
import App from './App';

export default withToggleProvider({
  publicApiKey: 'public_...',
  applicationId: 'my-app',
  environment: 'production',
  defaultContext: {
    user: { id: 'user-123', email: '[email protected]' }
  }
})(App);

Provider Component Pattern

import { ToggleProvider } from '@hyphen/react-sdk';
import App from './App';

function Root() {
  return (
    <ToggleProvider
      publicApiKey="public_..."
      applicationId="my-app"
      environment="production"
      defaultContext={{
        user: { id: 'user-123', email: 'user@example.com' }
      }}
    >
      <App />
    ToggleProvider>
  );
}

Using the useToggle Hook

import { useToggle } from '@hyphen/react-sdk';

function MyComponent() {
  const toggle = useToggle();

  // Get boolean feature flag
  const isNewFeatureEnabled = toggle.getBoolean('new-feature', false);

  // Get string feature flag
  const theme = toggle.getString('theme', 'light');

  // Get number feature flag
  const maxItems = toggle.getNumber('max-items', 10);

  // Get object feature flag
  const config = toggle.getObject('ui-config', { layout: 'grid' });

  return (
    <div>
      {isNewFeatureEnabled && <NewFeature />}
      <p>Theme: {theme}p>
      <p>Max Items: {maxItems}p>
    div>
  );
}