React SDK

npm install --save @splitsoftware/splitio-react

yarn add @splitsoftware/splitio-react

<!-- Don't forget to include React script tags before Split SDK. More details at https://reactjs.org/docs/add-react-to-a-website.html#step-2-add-the-script-tags  -->
<script src="//cdn.split.io/sdk/splitio-react-1.12.1.min.js"></script>

// CDN will expose the library globally with the "splitio" variable. Use the options that work best with your code.
const { SplitFactoryProvider } = window.splitio;

// Create the config for the SDK factory.
const sdkConfig = {
  core: {
    authorizationKey: 'YOUR_CLIENT_SIDE_SDK_KEY',
    // key represents your internal user id, or the account id that 
    // the user belongs to. 
    // This could also be a cookie you generate for anonymous users.
    key: 'key'
  }
};

// Using the SplitFactoryProvider component, MyApp component and all its descendants have access to the SDK functionality.
const App = () => (
  <SplitFactoryProvider config={sdkConfig} >
    <MyApp />
  </SplitFactoryProvider>
);

// The npm package exposes the different components and functions of the library as named exports.
const { SplitFactoryProvider } = require('@splitsoftware/splitio-react');

// Create the config for the SDK factory.
const sdkConfig = {
  core: {
    authorizationKey: 'YOUR_CLIENT_SIDE_SDK_KEY',
    // key represents your internal user id, or the account id that 
    // the user belongs to. 
    // This could also be a cookie you generate for anonymous users.
    key: 'key'
  }
};

// Using the SplitFactoryProvider component, MyApp component and all its descendants have access to the SDK functionality.
const App = () => (
  <SplitFactoryProvider config={sdkConfig} >
    <MyApp />
  </SplitFactoryProvider>
);

// The npm package exposes the different components and functions of the library as named exports.
import { SplitFactoryProvider } from '@splitsoftware/splitio-react';

// Create the config for the SDK factory.
const sdkConfig: SplitIO.IBrowserSettings = {
  core: {
    authorizationKey: 'YOUR_CLIENT_SIDE_SDK_KEY',
    // key represents your internal user id, or the account id that 
    // the user belongs to. 
    // This could also be a cookie you generate for anonymous users.
    key: 'key'
  }
};

// Using the SplitFactoryProvider component, MyApp component and all its descendants have access to the SDK functionality.
const App: React.ComponentType = () => (
  <SplitFactoryProvider config={sdkConfig} >
    <MyApp />
  </SplitFactoryProvider>
);

// The npm package exposes the different components and functions of the library as named exports.
// If you were using the bundle via CDN, it'll be at `window.splitio.SplitSdk`
import { SplitSdk, SplitFactoryProvider } from '@splitsoftware/splitio-react';

// Create the Split factory object with your custom settings, using the re-exported function.
const factory: SplitIO.ISDK = SplitSdk({
  core: {
    authorizationKey: 'YOUR_CLIENT_SIDE_SDK_KEY',
    key: 'key'
  },
  ...
});

// Using the SplitFactoryProvider component, MyApp component and all it's descendants will have access to the SDK functionality using the provided factory.
const App: React.ComponentType = () => (
  <SplitFactoryProvider factory={factory} >
    <MyApp />
  </SplitFactoryProvider>
);

import { SplitTreatments } from '@splitsoftware/splitio-react';
import MyComponentV1 from './MyComponentV1';
import MyComponentV2 from './MyComponentV2';

const featureName = 'FEATURE_FLAG_NAME';

/**
 * This is one way to write a toggler component, which might be convenient for code cleanup afterwards
 * as you remove both toggle and legacy component, then wire the version you'll keep.
 * But it's not the only way to use the treatments. Always follow the pattern that works best for you!
 **/
export default class MyComponentToggle extends React.Component {

  renderContent(treatmentWithConfig) {
    const { treatment, config } = treatmentWithConfig;

    if (treatment === 'on') return (<MyComponentV2 config={config} {...this.props} />);

    return (<MyComponentV1 config={config} {...this.props} />);
  }

  render() {
    return (
      <SplitTreatments names={[featureName]} >
        {({ treatments, isReady }) => { // Passes down a TreatmentsWithConfig object and SplitContext properties like the boolean `isReady` flag.
          return isReady ?
            this.renderContent(treatments[featureName]) : // Use the treatments and configs.
            <Spinner />; // Render a spinner if the SDK is not ready yet. You can do what you want with this boolean.
        }}
      </SplitTreatments>
    );
  }
}

import { useSplitTreatments } from '@splitsoftware/splitio-react';
import MyComponentV1 from './MyComponentV1';
import MyComponentV2 from './MyComponentV2';

const featureName = 'FEATURE_FLAG_NAME';

function renderContent(treatmentWithConfig, props) {
  const { treatment, config } = treatmentWithConfig;

  if (treatment === 'on') return (<MyComponentV2 config={config} {...props} />);

  return (<MyComponentV1 config={config} {...props} />);
}

/**
 * This is another way to write a toggler with a function component that uses hooks.
 **/
function MyComponentToggle (props) {

  // evaluate feature flags with the `useSplitTreatments` hook
  const { treatments, isReady } = useSplitTreatments({ names: [featureName] });

  return isReady ?
    renderContent(treatments[featureName], props) : // Use the treatments and configs.
    <Spinner />; // Render a spinner if the SDK is not ready yet.
}

export default MyComponentToggle;

type TreatmentWithConfig = {
  treatment: string,
  config: string | null
};

type TreatmentsWithConfig = {
  [featureName: string]: TreatmentWithConfig
};

import { SplitTreatments } from '@splitsoftware/splitio-react';
import MyComponentV1 from './MyComponentV1';
import MyComponentV2 from './MyComponentV2';

const flagSets = ['frontend', 'client_side'];
const featureName = 'FEATURE_FLAG_NAME';

export default class MyComponentToggle extends React.Component {

  renderContent(treatmentWithConfig) {
    const { treatment, config } = treatmentWithConfig;

    if (treatment === 'on') return (<MyComponentV2 config={config} {...this.props} />);

    return (<MyComponentV1 config={config} {...this.props} />);
  }

  render() {
    return (
      <SplitTreatments flagSets={flagSets} >
        {({ treatments, isReady }) => {
          return isReady ?
            // If your flag sets are not properly configured, `treatments` might be an empty object
            // or it might not contain the feature flags you expect.
            this.renderContent(treatments[featureName] || { treatment: 'control' }) :
            <Spinner />;
        }}
      </SplitTreatments>
    );
  }
}

import { useSplitTreatments } from '@splitsoftware/splitio-react';
import MyComponentV1 from './MyComponentV1';
import MyComponentV2 from './MyComponentV2';

const flagSets = ['frontend', 'client_side'];
const featureName = 'FEATURE_FLAG_NAME';

function renderContent(treatmentWithConfig, props) {
  const { treatment, config } = treatmentWithConfig;

  if (treatment === 'on') return (<MyComponentV2 config={config} {...props} />);

  return (<MyComponentV1 config={config} {...props} />);
}

function MyComponentToggle (props) {

  const { treatments, isReady } = useSplitTreatments({ flagSets: flagSets });

  return isReady ?
    // If your flag sets are not properly configured, `treatments` might be an empty object
    // or it might not contain the feature flags you expect.
    renderContent(treatments[featureName] || { treatment: 'control' }, props) : 
    <Spinner />;
}

export default MyComponentToggle;

const attributes = {
  // date attributes are handled as `millis since epoch`
  registered_date: new Date('YYYY-MM-DDTHH:mm:ss.sssZ').getTime(),
  // this string will be compared against a list called `plan_type`
  plan_type: 'growth',
  // this number will be compared agains a const value called `deal_size`
  deal_size: 10000,
  // this boolean will be compared against a const value called `paying_customer`
  paying_customer: true,
  // this array will be compared against a set called `permissions`
  permissions: ["read", "write"]
};

/** If you're using the SplitTreatments component, you can use attributes by setting the "attributes" prop. **/
const ComponentWithTreatments = () =>
  (<SplitTreatments names={[featureName]} attributes={attributes} >
    {({ treatments, isReady }) => {
      const treatment = treatments[featureName].treatment;

      if (treatment === 'on') {
        // do something
      } else {
        // do something else
      }
    }}
  </SplitTreatments>)

/** If you're using the SplitTreatments HOC, you can use attributes by passing those as the second parameter. **/
const ComponentWithTreatments = withSplitTreatments([featureName], attributes)(
  ({ treatments, isReady }) => {
    const treatment = treatments[featureName].treatment;

    if (treatment === 'on') {
      // do something
    } else {
      // do something else
    }
  });

const attributes: SplitIO.Attributes = {
  // date attributes are handled as `millis since epoch`
  registered_date: new Date('YYYY-MM-DDTHH:mm:ss.sssZ').getTime(),
  // this string will be compared against a list called `plan_type`
  plan_type: 'growth',
  // this number will be compared agains a const value called `deal_size`
  deal_size: 10000,
  // this array will be compared against a set called `permissions`
  permissions: ['read', 'write']
};

/** If you're using the SplitTreatments component, you can use attributes by setting the "attributes" prop. **/
const ComponentWithTreatments = () =>
  (<SplitTreatments names={[featureName]} attributes={attributes} >
    {({ treatments, isReady }) => {
      const treatment: SplitIO.TreatmentWithConfig = treatments[featureName].treatment;

      if (treatment === 'on') {
        // do something
      } else {
        // do something else
      }
    }}
  </SplitTreatments>)

/** If you're using the SplitTreatments HOC, you can use attributes by passing those as the second parameter. **/
const ComponentWithTreatments = withSplitTreatments([featureName], attributes)(
  ({ treatments, isReady }) => {
    const treatment: SplitIO.TreatmentWithConfig = treatments[featureName].treatment;

    if (treatment === 'on') {
      // do something
    } else {
      // do something else
    }
  });

import { SplitFactoryProvider, SplitClient, SplitTreatments } from '@splitsoftware/splitio-react';

// Assuming this is how the user setup the factory:
const sdkConfig = {
  core: {
    authorizationKey: 'YOUR_CLIENT_SIDE_API_KEY',
    key: 'nicolas@user'
  }
};
const factoryAttributes = {
  permissions: ["read", "write"]
};
const clientAttributes = {
  permissions: "read"
};
const treatmentAttributes = {
  deal_size: 10000
};

const App = () => (
  <SplitFactoryProvider config={sdkConfig} attributes={factoryAttributes}>
    <MyComponent accountId='nicolas@account' />
  </SplitFactoryProvider>
);

class MyComponent extends React.Component {

  render() {
    return (
      <div>
        {
         /*
          * Using SplitTreatments as a descendant of the SplitFactoryProvider with no SplitClient wrapping it, uses the main client 
          * bound to the key passed in the config for evaluations and the attributes received on SplitFactoryProvider attributes prop.
          */
        }
        <SplitTreatments names={['USER_FEATURE_FLAG_NAME']} attributes={treatmentAttributes}>
          {({ isReady, treatments }) => {
              // Do something with the treatments for the 'nicolas@user' key.
              // This evaluation combines SplitFactoryProvider component attributes with the ones on the SplitTreatments component.
              // Then it evaluates with attributes = { permissions: ["read", "write"], deal_size: 10000 }
          }}
        </SplitTreatments>
        {
         /*
          * To use another client, use the SplitClient component. Keep in mind that
          * this client might not be ready yet if it's just being created and still downloading segments
          * for the new key. Use the `isReady` property to check that.
          */
        }
        <SplitClient splitKey={this.props.accountId} attributes={clientAttributes} >
          <SplitTreatments names={['ACCOUNT_FEATURE_FLAG_NAME', 'ACCOUNT_FEATURE_FLAG_NAME_2']} attributes={treatmentAttributes} >
            {({ isReady, treatments }) => {
                // Do something with the treatments for the accountId key.
                // This evaluation is for another client, so factory attributes stored in main client (factory) will not be taking part.
                // This evaluation combines `treatmentAttributes` with `clientAttributes`.
                // The evaluation attributes are { permissions: "read", deal_size: 10000 }
            }}
          </SplitTreatments>
        </SplitClient>
      </div>
    );
  }
}

import { SplitFactoryProvider, useSplitClient, useSplitTreatments } from '@splitsoftware/splitio-react';

// Assuming this is how the user setup the factory:
const sdkConfig = {
  core: {
    authorizationKey: 'YOUR_CLIENT_SIDE_API_KEY',
    key: 'nicolas@user'
  }
};
const factoryAttributes = {
  permissions: ["read", "write"]
};
const clientAttributes = {
  permissions: "read"
};
const treatmentAttributes = {
  deal_size: 10000
};

const App = () => (
  <SplitFactoryProvider config={sdkConfig} attributes={factoryAttributes}>
    <MyComponent accountId='nicolas@account' />
  </SplitFactoryProvider>
);

function MyComponent(props) {

  /*
   * Using useSplitTreatments as a descendant of the SplitFactoryProvider with no SplitClient wrapping it, uses the main client 
   * bound to the key passed in the config for evaluations and the attributes received on SplitFactoryProvider attributes prop.
   */
  const { isReady, treatments } = useSplitTreatments({ names: ['USER_FEATURE_FLAG_NAME'], attributes: treatmentAttributes });
  // Do something with the treatments for the 'nicolas@user' key.
  // This evaluation combines SplitFactoryProvider component attributes with the ones provided to the useSplitTreatments hook.
  // Then it evaluates with attributes = { permissions: ["read", "write"], deal_size: 10000 }

  // You can retrieve clients for as many keys as you need, although it's not recommended to create more than you absolutely need to.
  // Keep in mind that if it is the first time you retrieve a client, it might not be ready yet.
  const { client: accountClient, isReady } = useSplitClient({ splitKey: this.props.accountId, attributes: clientAttributes });

  if (isReady) {
    // `accountClient` is ready to evaluate treatments as usual. To see more information about the client API, refer to the docs for JavaScript SDK.
    // In this evaluation, `treatmentAttributes`` are combined with `clientAttributes`
    const accountTreatments = accountClient.getTreatments(['ACCOUNT_FEATURE_FLAG_NAME', 'ACCOUNT_FEATURE_FLAG_NAME_2'], treatmentAttributes });

    // Do something with the treatments for the accountId key.
    // This evaluation is for another client, so factory attributes stored in main client (factory) will not be taking part.
    // This evaluation combines `treatmentAttributes` with `clientAttributes`.
    // The evaluation attributes are { permissions: "read", deal_size: 10000 }
    return (<div>{...}</div>);
  } else {
    // `accountClient` is not ready
    return (<div>{...}</div>);
  }

}

import { useTrack } from '@splitsoftware/splitio-react';

function MyComponent() {
  // With the useTrack hook you can get access to the regular .track() method of the client.
  const track = useTrack();

  // If you need to track events for a different key or just want to make sure you're tracking for the right key.
  const otherTrack = useTrack('key');

  // Here's what the track function signature looks like:
  // track(trafficType: string, eventType: string, value?: number, properties?: Properties): boolean;

  // Track events into an effect to make sure they're not tracked on every render.
  useEffect(() => {
    // Now you can track your events by passing at least the traffic type and the event type.
    let queued = track('user', 'logged_in');

    // Example with both a value and properties
    const properties = { package : "premium", admin : true, discount : 50 };
    queued = track('user', 'page_load_time', 83.334, properties);

    // If the event doesn't have a value but do have properties, skip the value by passing it null.
    queued = track('user', 'logged_in', null, properties);
  }, []);

  // Alternatively, you can also bind the trafficType to the track method for convenience by either calling useTrack with a traffic type:
  const track = useTrack('key', 'user');
  // Or by passing the traffic type to the SDK config when initializing, so the default track function will be already bound.
  // NOTE: Providing the traffic type in the config is only recommended if you won't track events for more than one traffic type for the given key and want to save passing the parameter.
  const track = useTrack();

  // Now you can call the tracker function as always without the need to provide a traffic type.
  // Signature of the function would be:
  // track(eventType: string, value?: number, properties?: Properties): boolean;

  useEffect(() => {
    // Same examples as before but now we don't need the traffic type.
    queued = track('logged_in');
    queued = track('page_load_time', 83.334, properties);
    queued = track('logged_in', null, properties);
  }, []);

import { useTrack } from '@splitsoftware/splitio-react';

function MyComponent() {
  // With the useTrack hook you can get access to the regular .track() method of the client, with the following signature
  let track: (trafficType: string, eventType: string, value?: number, properties?: SplitIO.Properties): boolean = useTrack();

  // If you need to track events for a different key or just want to make sure you're tracking for the right key
  track = useTrack('key');

  // Track events into an effect to make sure they're not tracked on every render.
  useEffect(() => {
    // Now you can track your events by passing at least the traffic type and the event type.
    let queued: boolean = track('user', 'logged_in');

    // Example with both a value and properties
    const properties: SplitIO.Properties = { package : "premium", admin : true, discount : 50 };
    queued = track('user', 'page_load_time', 83.334, properties);

    // If the event doesn't have a value but does have properties, skip the value by passing it null.
    queued = track('user', 'logged_in', null, properties);
  }, []);

  // Alternatively, you can also bind the trafficType to the track method for convenience by either calling useTrack with a traffic type:
  let otherTrack: (eventType: string, value?: number, properties?: SplitIO.Properties): boolean = useTrack('key', 'user');
  // Or by passing the traffic type to the SDK config when initializing, so the default track function will be already bound.
  // NOTE: Providing the traffic type in the config is only recommended if you won't track events for more than one traffic type for the given key and want to save passing the parameter.
  otherTrack = useTrack();

  useEffect(() => {
    // Same examples as before but now we don't need the traffic type
    queued = otherTrack('logged_in');
    queued = otherTrack('page_load_time', 83.334, properties);
    queued = otherTrack('logged_in', null, properties);
  }, []);

import { SplitClient, SplitFactoryProvider, SplitTreatments } from '@splitsoftware/splitio-react';

// you can access the SDK client as a render prop passed down by the `SplitFactoryProvider` component
const App = () => (
  <SplitFactoryProvider config={localstorageConfig} >
    {({ isReady, factory, client }) => {
      // `client` is the SDK client which key (or user id) is defined in the SDK config
      let queued = client.track('user', 'logged_in');

      // this is equivalent to:
      queue = factory.client().track('user', 'logged_in');

      ...
    }}
  </SplitFactoryProvider>
);

// you can also access the SDK client passed down by the `SplitTreatments` and `SplitClient` components
const App = () => {
  return (
    <SplitFactoryProvider config={localstorageConfig} >
      <SplitTreatments names={['some-split']}>
        {({ isReady, factory, client }) => {
          // `client` is the main client, i.e., `factory.client()`
          const queued = client.track('user', 'logged_in');

          ...
        }}
      </SplitTreatments>
      <SplitClient splitKey='key' >
        {({ isReady, factory, client }) => {
          // `client` here is the new client with 'key' user id
          const queued = client.track('user', 'logged_in');

          ...
        }}
      </SplitClient>

      <SplitClient splitKey='key2' trafficType='user'>
        {({ isReady, factory, client }) => {
          // `client` is another client with 'key2' as user id and bound traffic type
          const queued = client.track('logged_in');

          ...
        }}
      </SplitClient>
    </SplitFactoryProvider>
  )
}

import React from "react";
// React testing library: https://www.npmjs.com/package/@testing-library/react
import { render, waitFor } from "@testing-library/react";
import { SplitFactoryProvider, SplitTreatments } from "@splitsoftware/splitio-react";

const config = {
  core: {
    authorizationKey: 'localhost',
    key: 'user_id'
  },
  features: {
    'reporting_v2': 'on', // example with just a string value for the treatment
    'billing_updates': { treatment: 'visa', config: '{ "color": "blue" }' }, // example of a defined config
    'show_status_bar': { treatment: 'off', config: null } // example of a null config
  }
};

const MyApp = () => {
  return (
    <SplitFactoryProvider config={config} >
      <SplitTreatments names={['reporting_v2']} >
        {({ isReady, treatments }) => {
          return <div>{`${isReady ? 'SDK ready.' : 'SDK not ready.'} Feature flag reporting_v2 is ${treatments['reporting_v2'].treatment}`}</div>;
        }}
      </SplitTreatments>
    </SplitFactoryProvider>
  );
};

describe('MyApp', () => {
  test('renders the correct treatment', async () => {
    const { getByText, findByText } = render(<MyApp/>);

    // On the initial rendered output, the SDK is not ready. So treatment values are control.
    expect(getByText('SDK not ready. Feature flag reporting_v2 is control')).toBeTruthy();

    // In localhost mode, the SDK is ready and the component re-rendered with the mocked treatment on next event-loop tick.
    // So we use `findByText` to wait for the component to update.
    expect(await findByText('SDK ready. Feature flag reporting_v2 is on')).toBeTruthy();

    // `waitFor` (https://testing-library.com/docs/dom-testing-library/api-async/#waitfor) can also be used:
    expect(await waitFor(() => getByText('SDK ready. Feature flag reporting_v2 is on')));
  });
});

import React from 'react';
// Enzyme testing utility: https://www.npmjs.com/package/enzyme
import { mount } from 'enzyme';
import { SplitFactoryProvider, SplitTreatments } from '@splitsoftware/splitio-react';

const config = {
  core: {
    authorizationKey: 'localhost',
    key: 'user_id'
  },
  features: {
    'reporting_v2': 'on', // example with just a string value for the treatment
    'billing_updates': { treatment: 'visa', config: '{ "color": "blue" }' }, // example of a defined config
    'show_status_bar': { treatment: 'off', config: null } // example of a null config
  }
};

const MyApp = () => {
  return (
    <SplitFactoryProvider config={config} >
      <SplitTreatments names={['reporting_v2']} >
        {({ isReady, treatments }) => {
          return <div>{`${isReady ? 'SDK ready.' : 'SDK not ready.'} Feature flag reporting_v2 is ${treatments['reporting_v2'].treatment}`}</div>;
        }}
      </SplitTreatments>
    </SplitFactoryProvider>
  );
};

describe('MyApp', () => {
  test('renders the correct treatment', (done) => {
    const wrapper = mount(<MyApp/>);

    // On the initial rendered output, the SDK is not ready. So treatment values are control.
    expect(wrapper.html().includes('SDK not ready. Feature flag reporting_v2 is control')).toBeTruthy();

    // In localhost mode, the SDK is ready and the component re-rendered with the mocked treatment on next event-loop tick.
    // So we call `wrapper.update()` in a timeout callback to re-render the component.
    setTimeout(() => {
      wrapper.update();
      expect(wrapper.html().includes('SDK ready. Feature flag reporting_v2 is on')).toBeTruthy();

      done();
    }, 0);
  });
});

import React from 'react';
// React Test Renderer: https://reactjs.org/docs/test-renderer.html
import { create } from 'react-test-renderer';
import { SplitFactoryProvider, SplitTreatments } from '@splitsoftware/splitio-react';

const config = {
  core: {
    authorizationKey: 'localhost',
    key: 'user_id'
  },
  features: {
    'reporting_v2': 'on', // example with just a string value for the treatment
    'billing_updates': { treatment: 'visa', config: '{ "color": "blue" }' }, // example of a defined config
    'show_status_bar': { treatment: 'off', config: null } // example of a null config
  }
};

const MyApp = () => {
  return (
    <SplitFactoryProvider config={config} >
      <SplitTreatments names={['reporting_v2']} >
        {({ isReady, treatments }) => {
          return <div>{`${isReady ? 'SDK ready.' : 'SDK not ready.'} Feature flag reporting_v2 is ${treatments['reporting_v2'].treatment}`}</div>;
        }}
      </SplitTreatments>
    </SplitFactoryProvider>
  );
};

describe('MyApp', () => {
  test('renders the correct treatment', (done) => {
    const root = create(<MyApp/>);

    // On the initial rendered output, the SDK is not ready. So treatment values are control.
    expect(root.toJSON().children[0]).toEqual('SDK not ready. Feature flag reporting_v2 is control');

    // In localhost mode, the SDK is ready and the component re-rendered with the mocked treatment on next event-loop tick.
    // So we call `root.update` in a timeout callback to re-render the component.
    setTimeout(() => {
      root.update(<MyApp/>);
      expect(root.toJSON().children[0]).toEqual('SDK ready. Feature flag reporting_v2 is on');

      done();
    }, 0);
  });
});

import { useSplitManager } from '@splitsoftware/splitio-react';

const { manager, isReady } = useSplitManager();

// Make sure the SDK is ready to return Split's data from the manager object
if (isReady) {
  // Manager is ready to be used.
  const flagNames = manager.names();
}

import { useSplitManager } from '@splitsoftware/splitio-react';

const { manager, isReady } = useSplitManager();

// Make sure the SDK is ready to return Split's data from the manager object
if (isReady) {
  // Manager is ready to be used.
  const flagNames: SplitIO.SplitNames = manager.names();
}

import { SplitFactoryProvider } from '@splitsoftware/splitio-react';

function logImpression(impressionData) {
  // do something with the impression data.
}

// Create the config for the SDK factory.
const sdkConfig = {
  core: {
    authorizationKey: 'YOUR_CLIENT_SIDE_SDK_KEY',
    key: 'key'
  },
  impressionListener: {
    logImpression: logImpression
  }
});

// Using the SplitFactoryProvider component.
const App = () => (
  <SplitFactoryProvider config={sdkConfig} >
    <MyApp />
  </SplitFactoryProvider>
);

import { SplitFactoryProvider } from '@splitsoftware/splitio-react';

class MyImprListener implements SplitIO.IImpressionListener {
  logImpression(impressionData: SplitIO.ImpressionData) {
    // do something with impressionData
  }
}

// Create the config for the SDK factory.
const sdkConfig = {
  core: {
    authorizationKey: 'YOUR_CLIENT_SIDE_SDK_KEY',
    key: 'key'
  },
  impressionListener: {
    logImpression: new MyImprListener()
  }
});

// Using the SplitFactoryProvider component.
const App: React.ComponentType = () => (
  <SplitFactoryProvider config={sdkConfig} >
    <MyApp />
  </SplitFactoryProvider>
);

import { SplitFactoryProvider, SplitClient } from '@splitsoftware/splitio-react';

// Assuming this is how we setup the factory:
const sdkConfig = {
  core: {
    authorizationKey: 'YOUR_CLIENT_SIDE_SDK_KEY',
    key: 'nicolas@split'
  }
};

const App = () => (
  <SplitFactoryProvider config={sdkConfig} > 
    <MyComponentWithFlags accountId='nicolas@account' /> 
  </SplitFactoryProvider>
);

class MyComponentWithFlags extends React.Component {

  // See how you can use the component to evaluate for multiple clients in your templates.
  render() {
    return (
      <div>
        {
          /*
          * Using SplitTreatments as a descendant of the SplitFactoryProvider with no SplitClient wrapping it,
          * uses the main client bound to the key passed in the config for evaluations.
          * In this case the used key for evaluations is 'nicolas@split'.
          */
        }
        <SplitTreatments names={['USER_FEATURE_FLAG_NAME']} >
          {({ isReady, treatments }) => {
              // Do something with the treatments for the user traffic type.
          }}
        </SplitTreatments>
        {
          /*
          * To use another client, you can use the SplitClient component. Keep in mind that
          * this client might not be ready yet if it's just being created and still downloading segments
          * for the new key, but you can use the isReady property to block until ready.
          */
        }
        <SplitClient splitKey={this.props.accountId}  >
          <SplitTreatments names={['ACCOUNT_FEATURE_FLAG_NAME', 'ACCOUNT_FEATURE_FLAG_NAME_2']} >
            {({ isReady, treatments }) => {
                // Do something with the treatments for the account traffic type.
            }}
          </SplitTreatments>
        </SplitClient>
      </div>
    );
  }
}

import { SplitFactoryProvider, useSplitClient } from '@splitsoftware/splitio-react';

// Assuming this is how we setup the factory:
const sdkConfig = {
  core: {
    authorizationKey: 'YOUR_CLIENT_SIDE_SDK_KEY',
    key: 'nicolas@split'
  }
};

const App = () => (
  <SplitFactoryProvider config={sdkConfig} >
    <MyComponentWithFlags accountId='nicolas@account' />
  </SplitFactoryProvider>
);

// An example of how you can access a different SDK client to track events or evaluate flags in a function component with `useSplitClient` hook.
function MyComponentWithFlags(props) {

  // Calling useSplitClient with no parameters returns the client on the context of this component. If MyComponentWithFlags
  // is not descendant of a SplitClient component, it returns the main client associated with the key provided on initialization.
  // In this case the client associated with 'nicolas@split'
  const { client: inContextClient } = useSplitClient();

  // If client was already instantiated, it is just a getter like in the regular JS SDK.
  const { client: myUserClient } = useSplitClient({ splitKey: 'nicolas@split' });

  console.log(inContextClient === myUserClient); // logs "true"

  // You can retrieve clients for as many keys as you need, although not recommended to create more than you absolutely need to.
  // Keep in mind that if it is the first time you retrieve a client, it might not be ready yet.
  const { client: accountClient, isReady: isReadyAccountClient } = useSplitClient({ splitKey: this.props.accountId });

  if (isReadyAccountClient) {
    // `accountClient` is ready to evaluate treatments as usual. To see more information about the client API go to the docs for JavaScript SDK.
    const accountTreatments = accountClient.getTreatments(['ACCOUNT_FEATURE_FLAG_NAME', 'ACCOUNT_FEATURE_FLAG_NAME_2']);

    return (<div>{...}</div>);
  } else {
    // `accountClient` is not ready
    return (<div>{...}</div>);
  }

}

function MyApp() {
  // Evaluates feature flags for the main client bound to the key passed in the factory config.
  const { treatments, isReady, isReadyFromCache, hasTimedout, lastUpdate } = useSplitTreatments({ names: ['USER_FEATURE_FLAG_NAME'] });

  // But we can evaluate at a per client basis, and choose when to trigger a re-render. 
  // For example, the accountId we only want to update on SDK_READY and SDK_READY_TIMED_OUT. Not on SDK_READY_FROM_CACHE or SDK_UPDATE.
  const { treatments: accountTreatments, isReady: isReadyAccount, hasTimedout: hasTimedoutAccount } = useSplitTreatments({
    names: ['ACCOUNT_FEATURE_FLAG_NAME', 'ACCOUNT_FEATURE_FLAG_NAME_2'],
    splitKey: accountId,
    updateOnSdkReadyFromCache: false, // true by default.
    updateOnSdkTimedout: true // false by default.
    // `updateOnSdkUpdate` is false by default and `updateOnSdkReady` is true by default.
  });

  return (
    <div> 
      {
        // Do something with the treatments for the main key
      }
      {
        // Do something with the treatments for the account key
      }
    </div>
  );
};

const App = () => (
  /* Since MyApp is a child of the SplitFactoryProvider component, it re-renders on SDK_READY, SDK_READY_FROM_CACHE, 
   * and SDK_UPDATE events, but not on SDK_READY_TIMED_OUT (because updateOnSdkTimedout is false).
   */
  <SplitFactoryProvider config={sdkConfig} updateOnSdkUpdate={true} updateOnSdkTimedout={false} >
    <MyApp />
  </SplitFactoryProvider>
);

function MyApp({ isReady, isReadyFromCache, isTimedout, hasTimedout, lastUpdate, factory, client }) {
  return (
    <div>
      <SplitTreatments names={['USER_FEATURE_FLAG_NAME']} >
        {
          // Do something with the treatments for the user key defined in the config.
        }
      </SplitTreatments>

      { /* But we can override that setup at a per client basis, so the account one we only want to
         * update on SDK_READY and SDK_READY_TIMED_OUT */ }
      <SplitClient splitKey={accountId} updateOnSdkReadyFromCache={false} updateOnSdkUpdate={false} updateOnSdkTimedout={true} >
        <SplitTreatments names={['ACCOUNT_FEATURE_FLAG_NAME', 'ACCOUNT_FEATURE_FLAG_NAME_2']} >
          {({ isReady, isReadyFromCache, isTimedout, hasTimedout, lastUpdate, treatments }) => {
            // Do something with the treatments for the `accountId` key.
          }}
        </SplitTreatments>
      </SplitClient>
    </div>
  );
};

const App = () => (
  /* Here MyApp function component is passed as a render prop component and not as a React element like <MyApp>.
   * MyApp is called with the SplitContext object as param, which contains the SDK factory, client and status properties.
   * Since this is a child of the SplitFactoryProvider component, it is called again on SDK_READY, SDK_READY_FROM_CACHE,
   * and SDK_UPDATE events, but not on SDK_READY_TIMED_OUT (because updateOnSdkTimedout is false).
   */
  <SplitFactoryProvider config={sdkConfig} updateOnSdkUpdate={true} updateOnSdkTimedout={false} >
    {MyApp}
  </SplitFactoryProvider>
);

import { useContext } from 'react';
import { SplitContext } from "@splitsoftware/splitio-react";

const MyComponent = () => {
  const { isReady, isTimedout } = useContext(SplitContext);
  return isReady || isTimedout ?
    <MyFeature /> :
    <Loading />
}

import { useContext } from 'react';
import { SplitContext } from "@splitsoftware/splitio-react";

const MyComponent: React.ComponentType = () => {
  const { isReady, isTimedout }: ISplitContextValues = useContext(SplitContext);
  return isReady || isTimedout ?
    <MyFeature /> :
    <Loading />
}

interface SplitContextValue {
  factory: SplitIO.ISDK,
  client: SplitIO.IClient,
  isReady: boolean,
  isReadyFromCache: boolean,
  hasTimeout: boolean,
  isTimedout: boolean,
  isDestroyed: boolean,
  lastUpdate: number,
}

// App.jsx
const myConfig = { ... }; // SDK configuration object

export const App = () => {
  return (
    <SplitFactoryProvider config={myConfig} >
      <MyComponentWithFeatureFlags />
    </SplitFactoryProvider>
  )
};

// server.jsx
import { renderToString } from 'react-dom/server';
import { App } from './App';

app.use('/', (request, response) => {
  const reactHtml = renderToString(<App />);
  response.send(`
    <!DOCTYPE html>
    <html>
      <head><title>My App</title></head>
      <body><div id="root">${reactHtml}</div></body>
    </html>
    <script src="/client.js" async=""></script>
  `);
});

// client.jsx, bundled into client.js
import { hydrateRoot } from 'react-dom/client';
import { App } from './App'

const domNode = document.getElementById('root');
const root = hydrateRoot(domNode, <App />);

// pages/index.jsx
export const getServerSideProps = (async () => {
  ...
  const myConfig = { ... } // SDK configuration object
  return { props: { myConfig, ... } }
});

export default function Page(props) {
  return (
    <SplitFactoryProvider config={props.myConfig} >
      <MyComponentWithFeatureFlags />
    </SplitFactoryProvider>
  );
};

// SDK components are traditional "Client" components, so you need to use the 'use client' directive to nest with Server components 
// https://nextjs.org/docs/app/building-your-application/rendering/client-components

// app/providers.jsx
'use client'

import { SplitFactoryProvider } from '@splitsoftware/splitio-react';

export default function Providers({ children }) {
  const [myConfig] = React.useState(() => {
    return { ... } // SDK configuration object
  });

  return (
    <SplitFactoryProvider config={myConfig}>{children}</SplitFactoryProvider>
  );
};

// app/layout.jsx
import Providers from './providers';

export default function RootLayout({ children }) {
  return (
    <html lang='en'>
      <head />
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
};

// app/page.jsx
import { MyComponentWithFeatureFlags } from './MyComponentWithFeatureFlags';

export default async function Home() {
  const props = await getAsyncData();

  return (
    <MyComponentWithFeatureFlags {...props} />
  );
}

// app/MyComponentWithFeatureFlags.jsx
'use client'

import { useSplitTreatments } from '@splitsoftware/splitio-react';

const FEATURE_FLAG_NAME = 'test_split';

export const MyComponentWithFeatureFlags = (props) => {
  const { treatments, isReady } = useSplitTreatments({ names: [FEATURE_FLAG_NAME] });

  return isReady ?
    treatments[FEATURE_FLAG_NAME].treatment === 'on' ?
      <OnComponent {...props} /> :
      <OffComponent {...props} /> :
    <Loading {...props} />
};

import { SplitFactory } from '@splitsoftware/splitio-react-native';
import { SplitFactoryProvider } from '@splitsoftware/splitio-react';

const reactNativeFactory = SplitFactory({
  core: {
    authorizationKey: 'YOUR_CLIENT_SIDE_SDK_KEY',
    key: 'key'
  },
  ...
});

// Using the SplitFactoryProvider component, MyApp component and all it's descendants will have access to the SDK functionality using the provided React Native SDK factory.
const App = () => (
  <SplitFactoryProvider factory={reactNativeFactory} >
    <MyApp />
  </SplitFactoryProvider>
);