How to integrate multiple Launchdarkly projects into a single react app

Question

Launchdarkly's react web docs has a simple example of how to get started using feature flags from a single project.

import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';

(async () => {
  const LDProvider = await asyncWithLDProvider({
    clientSideID: 'client-side-id-123abc',
    user: {
      "key": "user-key-123abc",
      "name": "Sandy Smith",
      "email": "[email protected]"
    },
    options: { /* ... */ }
  });

  render(
    <LDProvider>
      <YourApp />
    </LDProvider>,
    document.getElementById('reactDiv'),
  );
})();

But what if I wanted to integrate feature flags from multiple LD projects (i.e. multiple clientSideID values? Is that possible with a single provider?

I tried setting up multiple providers with the same user but different client IDs, but that didn't work. I was only able to access feature flags from the innermost provider wrapping the App. clientSideID values are mocked here of course.

import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';

(async () => {
  const LDProvider1 = await asyncWithLDProvider({
    clientSideID: 'client-side-id-123abc',
    user: {
      "key": "user-key-123abc",
      "name": "Sandy Smith",
      "email": "[email protected]"
    },
  });

  const LDProvider2 = await asyncWithLDProvider({
    clientSideID: 'client-side-id-zzzzzz',
    user: {
      "key": "user-key-123abc",
      "name": "Sandy Smith",
      "email": "[email protected]"
    },
  });

  render(
    <LDProvider1>
    <LDProvider2>
      <YourApp />
    </LDProvider2>
    </LDProvider1>,
    document.getElementById('reactDiv'),
  );
})();

Answer 1

Right now, it seems that using multiple LDClient instances with separate keys is only supported in Android, iOS and React Native

https://docs.launchdarkly.com/sdk/features/multiple-environments

Disclaimer: I work at Statsig, a feature flagging and experimentation platform