React SDK

1
import { createRoot } from 'react-dom/client';
2
import { FlagProvider } from '@unleash/proxy-client-react';
3
4
const config = {
5
  url: '<unleash-url>/api/frontend', // Your Frontend API URL or the Unleash Edge URL
6
  clientKey: '<your-token>', // A frontend token OR one of your unleash-edge pretrusted token
7
  refreshInterval: 15, // How often (in seconds) the client should poll the proxy for updates
8
  appName: 'your-app-name', // The name of your application. It's only used for identifying your application
9
};
10
11
const root = createRoot(document.getElementById('root'));
12
13
root.render(
14
  <React.StrictMode>
15
    <FlagProvider config={config}>
16
      <App />
17
    </FlagProvider>
18
  </React.StrictMode>
19
);

1
import { useFlag } from '@unleash/proxy-client-react';
2
3
const TestComponent = () => {
4
  const enabled = useFlag('travel.landing');
5
6
  if (enabled) {
7
    return <SomeComponent />;
8
  }
9
  return <AnotherComponent />;
10
};
11
12
export default TestComponent;

1
import { useVariant } from '@unleash/proxy-client-react';
2
3
const TestComponent = () => {
4
  const variant = useVariant('travel.landing');
5
6
  if (variant.enabled && variant.name === 'SomeComponent') {
7
    return <SomeComponent />;
8
  } else if (variant.enabled && variant.name === 'AnotherComponent') {
9
    return <AnotherComponent />;
10
  }
11
  return <DefaultComponent />;
12
};
13
14
export default TestComponent;

1
import { useFlagsStatus } from '@unleash/proxy-client-react';
2
3
const MyApp = () => {
4
  const { flagsReady, flagsError } = useFlagsStatus();
5
6
  if (!flagsReady) {
7
    return <Loading />;
8
  }
9
  return <MyComponent error={flagsError} />;
10
};

1
import { useUnleashContext, useFlag } from '@unleash/proxy-client-react';
2
3
const MyComponent = ({ userId }) => {
4
  const variant = useFlag('my-toggle');
5
  const updateContext = useUnleashContext();
6
7
  useEffect(() => {
8
    // context is updated with userId
9
    updateContext({ userId });
10
  }, [userId]);
11
12
  // OR if you need to perform an action right after new context is applied
13
  useEffect(() => {
14
    async function run() {
15
      // Can wait for the new flags to pull in from the different context
16
      await updateContext({ userId });
17
      console.log('new flags loaded for', userId);
18
    }
19
    run();
20
  }, [userId]);
21
};

1
import { useUnleashClient, useFlag } from '@unleash/proxy-client-react';
2
3
const MyComponent = ({ userId }) => {
4
  const client = useUnleashClient();
5
6
  useEffect(() => {
7
    if (client) {
8
      const handleError = () => {
9
        // Handle error
10
      }
11
12
      client.on('error', handleError)
13
    }
14
15
    return () => {
16
      client.off('error', handleError)
17
    }
18
  }, [client])
19
20
  // ...rest of component
21
};

1
const client = new UnleashClient({
2
  /* ... */
3
});
4
5
const MyAppComponent = () => {
6
  useEffect(() => {
7
    const asyncProcess = async () => {
8
      // do async work ...
9
      client.start();
10
    };
11
    asyncProcess();
12
  }, []);
13
14
  return (
15
    // Pass client as `unleashClient` and set `startClient` to `false`
16
    <FlagProvider unleashClient={client} startClient={false}>
17
      <App />
18
    </FlagProvider>
19
  );
20
};

1
import { useUnleashContext, useUnleashClient } from '@unleash/proxy-client-react'
2
3
const MyComponent = ({ userId }) => {
4
  const client = useUnleashClient();
5
6
  const login = () => {
7
    // login user
8
    if (client.isEnabled("new-onboarding")) {
9
      // Send user to new onboarding flow
10
    } else {
11
      // send user to old onboarding flow
12
    }
13
  }
14
15
  return <LoginForm login={login}/>
16
}

1
import React from 'react';
2
import {
3
  useFlag,
4
  useUnleashClient,
5
  useUnleashContext,
6
  useVariant,
7
  useFlagsStatus,
8
} from '@unleash/proxy-client-react';
9
10
interface IUnleashClassFlagProvider {
11
  render: (props: any) => React.ReactNode;
12
  flagName: string;
13
}
14
15
export const UnleashClassFlagProvider = ({
16
  render,
17
  flagName,
18
}: IUnleashClassFlagProvider) => {
19
  const enabled = useFlag(flagName);
20
  const variant = useVariant(flagName);
21
  const client = useUnleashClient();
22
23
  const updateContext = useUnleashContext();
24
  const { flagsReady, flagsError } = useFlagsStatus();
25
26
  const isEnabled = () => {
27
    return enabled;
28
  };
29
30
  const getVariant = () => {
31
    return variant;
32
  };
33
34
  const getClient = () => {
35
    return client;
36
  };
37
38
  const getUnleashContextSetter = () => {
39
    return updateContext;
40
  };
41
42
  const getFlagsStatus = () => {
43
    return { flagsReady, flagsError };
44
  };
45
46
  return (
47
    <>
48
      {render({
49
        isEnabled,
50
        getVariant,
51
        getClient,
52
        getUnleashContextSetter,
53
        getFlagsStatus,
54
      })}
55
    </>
56
  );
57
};

1
<UnleashClassFlagProvider
2
  flagName="demoApp.step1"
3
  render={({ isEnabled, getClient }) => (
4
    <MyClassComponent isEnabled={isEnabled} getClient={getClient} />
5
  )}
6
/>