React SDK

<!-- 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.8.3.min.js"></script>

npm install --save @splitsoftware/splitio-react@1.8.3

yarn add @splitsoftware/splitio-react@1.8.3

// CDN will expose the library globally with the "splitio" variable. Use the options that work best with your code.
const { SplitFactory, withSplitFactory } = 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 SplitFactory component, MyApp component and all its descendants have access to the SDK functionality.
const App = () => (
  <SplitFactory config={sdkConfig} >
    <MyApp />
  </SplitFactory>
);

// As an alternative, you can use the equivalent withSplitFactory HOC, wrapping the given component inside a Split factory.
const App = withSplitFactory(sdkConfig)(MyApp);

// The npm package exposes the different components and functions of the library as named exports.
const { SplitFactory, withSplitFactory } = 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 SplitFactory component, MyApp component and all its descendants have access to the SDK functionality.
const App = () => (
  <SplitFactory config={sdkConfig} >
    <MyApp />
  </SplitFactory>
);

// As an alternative, you can use the equivalent withSplitFactory HOC, wrapping the given component inside a Split factory.
const App = withSplitFactory(sdkConfig)(MyApp);

// The npm package exposes the different components and functions of the library as named exports.
import { SplitFactory, withSplitFactory } 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 SplitFactory component, MyApp component and all its descendants have access to the SDK functionality.
const App: React.ComponentType = () => (
  <SplitFactory config={sdkConfig} >
    <MyApp />
  </SplitFactory>
);

// As an alternative, you can use the equivalent withSplitFactory HOC, wrapping the given component inside a Split factory.
const App: React.ComponentType = withSplitFactory(sdkConfig)(MyApp);

// 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, SplitFactory, withSplitFactory } 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 SplitFactory component, MyApp component and all it's descendants will have access to the SDK functionality using the provided factory.
const App: React.ComponentType = () => (
  <SplitFactory factory={factory} >
    <MyApp />
  </SplitFactory>
);

// As an alternative, you can use the equivalent withSplitFactory HOC where the factory instance would be the 2nd parameter.
const App: React.ComponentType = withSplitFactory(false, factory)(MyApp);

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 { SplitTreatments } from '@splitsoftware/splitio-react';
import MyComponentV1 from './MyComponentV1';
import MyComponentV2 from './MyComponentV2';

const featureName: string = 'FEATURE_FLAG_NAME';

/**
 * This is just 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: SplitIO.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 }: ISplitTreatmentsChildProps) => { // 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 { withSplitTreatments } 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!
 **/
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() {
    // A component wrapped by the `withSplitTreatments` HOC receives a TreatmentsWithConfig object and SplitContext properties as props
    const { treatments, isReady } = this.props;
    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.
    );
  }
}

// As an alternative you could use our equivalent HOC
export default withSplitTreatments([featureName])(MyComponentToggle);

import { useContext } from 'react';
import { useTreatments, SplitContext } 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) {

  // access status properties via the SplitContext
  const { isReady } = useContext(SplitContext);
  // evaluate feature flags with the `useTreatments` hook
  const treatments = useTreatments([featureName]);

  return isReady ?
    renderContent(treatments[featureName], props) : // 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.
  );
}

// As an alternative you could use our equivalent HOC
export default MyComponentToggle;

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

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

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 { SplitFactory, SplitClient } from '@splitsoftware/splitio-react';

// Assuming this is how the user setup the factory:
const sdkConfig = {
  core: {
    authorizationKey: 'YOUR_CLIENT_SIDE_API_KEY',
    key: 'key'
  }
};
const factoryAttributes = {
  permissions: ["read", "write"]
};
const clientAttributes = {
  permissions: "read"
};
const treatmentAttributes = {
  deal_size: 10000
};
const App = () => (
  <SplitFactory config={sdkConfig} attributes={factoryAttributes}>
    <MyComponentWithAttributes />
  </SplitFactory>);

class MyComponentWithAttributes extends React.Component {

  render() {
    return (
      <div>
        {
          /*
          * Using SplitTreatments as a descendant of the SplitFactory with no SplitClient wrapping it,
          * uses the client main client binded to the key passed in the config for evaluations.
          * and uses the attributes received on factory attributes param
          * In this case, the used key for evaluations is nicolas@split.
          */
        }
        <SplitTreatments names={['USER_FEATURE_FLAG_NAME']} attributes={treatmentAttributes}>
          {({ isReady, treatments }) => {
              // Do something with the treatments for the user traffic type.
              // This evaluation combines SplitFactory component attributes with the ones on SplitTreatment 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, but you can use the isReady property to block until ready.
          */
        }
        <SplitClient splitKey={this.props.accountId} attributes={clientAttributes} >
          <SplitTreatments names={['ACCOUNT_FEATURE_FLAG_NAME', 'ACCOUNT_FEATURE_FLAG_NAME_2']} >
            {({ isReady, treatments }) => {
                // Do something with the treatments for the account traffic type.
                // This evaluation is for another client, so factory attributes stored in main client (factory) will not be taking part.
                // In this evaluation, the attributes on treatment are combined with SplitClient component ones.
                // The evaluation attributes are {permissions: "read"}
            }}
          </SplitTreatments>
        </SplitClient>
      </div>
    );
  }
}

import { SplitFactory, useClient } from '@splitsoftware/splitio-react';

const factoryAttributes = {
  permissions: ["read", "write"]
};

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

function MyComponentWithNewSdkClient(props) {


  const inContextClient = useClient();

  // You can retrieve clients for as many keys as you need, although not it's 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 accountClient = useClient(this.props.accountId, 'user', {clientAttributes});

  if (readyAccountClient) {
    // `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, the attributes on treatment are combined with the ones on useClient
    const accountTreatments = readyAccountClient.getTreatments(['ACCOUNT_FEATURE_FLAG_NAME', 'ACCOUNT_FEATURE_FLAG_NAME_2']);

    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;

  // 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 binded.
  // 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;

  // 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');

  // 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 binded.
  // 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();

  // 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, SplitFactory, SplitTreatments } from '@splitsoftware/splitio-react';

// you can access the SDK client as a render prop passed down by the `SplitFactory` component
const App = () => (
  <SplitFactory 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');

      ...
    }}
  </SplitFactory>
);

// you can also access the SDK client passed down by the `SplitTreatments` and `SplitClient` components
const App = () => {
  return (
    <SplitFactory 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 binded traffic type
          const queued = client.track('logged_in');

          ...
        }}
      </SplitClient>
    </SplitFactory>
  )
}

// The same can be done using HOCs, such as `withSplitFactory`:
import { withSplitFactory } from '@splitsoftware/splitio-react';

const App = withSplitFactory(localstorageConfig)(
  ({ isReady, factory, client }) => {
    const queued = client.track('user', 'logged_in');

    ...
  }
);

import React from "react";
// React testing library: https://www.npmjs.com/package/@testing-library/react
import { render, waitFor } from "@testing-library/react";
import { SplitFactory, 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 (
    <SplitFactory 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>
    </SplitFactory>
  );
};

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 { SplitFactory, 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 (
    <SplitFactory 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>
    </SplitFactory>
  );
};

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 { SplitFactory, 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 (
    <SplitFactory 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>
    </SplitFactory>
  );
};

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 { useManager } from '@splitsoftware/splitio-react';

const manager = useManager();

// Now you can interact with the manager as with the regular SDK.
let flagNames = manager.names();

// If you want to make sure is ready to return Split's data from the manager object itself, you could use the .ready() promise.
manager.ready().then(() => {
  // Manager is ready to be used.
  flagNames = manager.names();
});

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

const manager: SplitIO.IManager | null = useManager();

// Now you can interact with the manager as with the regular SDK.
let flagNames: SplitIO.SplitNames = manager.names();

// If you want to make sure is ready to return Split's data from the manager object itself, you could use the .ready() promise.
manager.ready().then(() => {
  // Manager is ready to be used.
  flagNames = manager.names();
});

import { SplitFactory } 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 SplitFactory component.
const App = () => (
  <SplitFactory config={sdkConfig} >
    <MyApp />
  </SplitFactory>
);

import { SplitFactory } 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 SplitFactory component.
const App: React.ComponentType = () => (
  <SplitFactory config={sdkConfig} >
    <MyApp />
  </SplitFactory>
);

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

// Assuming this is how we setup the factory:
const sdkConfig = {
  core: {
    authorizationKey: 'YOUR_CLIENT_SIDE_SDK_KEY',
    key: 'key'
  }
};
const App = () => (<SplitFactory config={sdkConfig} > <MyComponentWithFlags /> </SplitFactory>);

class MyHeaderToggler 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 SplitFactory with no SplitClient wrapping it,
          * uses the client main client binded 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 { SplitFactory, useClient } 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 = () => (
  <SplitFactory config={sdkConfig} >
    <MyComponentWithNewSdkClient accountId='nicolas@account' />
  </SplitFactory>
);

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

  // Calling useClient 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 inContextClient = useClient();

  // If client was already instantiated, it is just a getter like in the regular JS SDK.
  const myUserClient = useClient('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 accountClient = useClient(this.props.accountId);

  // We declares our client as an state variable, and set it once we know it is ready
  const [readyAccountClient, setReadyAccountClient] = useState();

  // Since SDK clients don't provide a synchronous way to check if they are ready or not, we need to listen SDK_READY event in a side-effect
  useEffect(() => {
    accountClient.on(accountClient.Event.SDK_READY, () => {
      setReadyAccountClient(accountClient);
    })
  }, [accountClient])

  if (readyAccountClient) {
    // `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 = readyAccountClient.getTreatments(['ACCOUNT_FEATURE_FLAG_NAME', 'ACCOUNT_FEATURE_FLAG_NAME_2']);

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

}

function MyApp({ isReady, isReadyFromCache, isTimedout, hasTimedout, lastUpdate, factory, client }) {
  /* Since this is a child of the SplitFactory, it is call again
   * on SDK_READY, SDK_READY_FROM_CACHE, SDK_UPDATE and not on SDK_READY_TIMED_OUT */
  return (
    <div>
      <SplitTreatments names={['USER_FEATURE_FLAG_NAME']} >
        {
          // Do something with the treatments for the user traffic type.
        }
      </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={props.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 account traffic type.
          }}
        </SplitTreatments>
      </SplitClient>
    </div>
  );
};

const App = () => (
  <SplitFactory config={sdkConfig} updateOnSdkUpdate={true} updateOnSdkTimedout={false} >
    {/* 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. */}
    {MyApp}
  </SplitFactory>
);

/*
 * HOCs receive the flags as the 2nd, 3rd and 4th param. The signature of the returned HOC function would be:
 */
(WrappedComponent: React.ComponentType<P>, updateOnSdkUpdate?: boolean, updateOnSdkTimedout?: boolean, updateOnSdkReady?: boolean) => (props: <P>) => JSX.Element;

// So for example, if we wanted the same settings as before in the factory using the HOC
const App = withSplitFactory(sdkConfig)(MyApp, true, false);

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,
}