splitio-react

> An alternative React solution for Split.io.

How to Install

``
npm install split-react
`

or

`
yarn add split-react
`


Motivation

Split is a great and simple solution to work with Feature Flags, that can be used to control your application behavior, toggling features on and off, performing progressive rollouts (canary launching), A/B testing and so on.

Besides proving SDKs for several programming languages, it also allows you to start with the free tier, in which you may control simple _string flags_ (or _splits_, as they call them).

Even though their React SDK works well and brings many cool features out of the box, there's a possible improvement point, which is the very reason of this library here.

The Problem

Whenever there's a change in one of your flags, their SDK triggers updating events to all of your hooked components listening to Split's flags, even if they're not related to the flag that's just changed. That will cause unnecessary re-renders in your React application, something to avoid, ideally.

The Goal

Instead of working on their own repository, this library has the goals of not only improving that by avoiding unnecessary re-renders, as well as providing an even leaner solution that basically takes their basic Javascript SDK and enhances it to be used on a React application.

The Solution

What this library does is basically creating a SplitProvider to wrap your application with, using a simple Pub/Sub mechanism under the hood, which will only dispatch update events to the hooks that are listening to the specific flags that have changed. Simple as that!

Example

Here's a simple usage of split-react:
> https://github.com/emarques3/test-split-react

There you'll find two basic usage of this lib, with useSplit hook, and withSplit HOC.

$3

1. Wrap your app with the SplitProvider
`tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { SplitProvider } from 'split-react';
import { config } from './split/config';

ReactDOM.render(


,
document.getElementById('root')
);
`
2. Use your Split config, the only required fields are the authorizationKey and key
`typescript
import { SplitConfig } from 'split-react';

const key = '[SOME_USER_KEY]';

export const config: SplitConfig = {
core: {
authorizationKey: '[YOUR_SPLIT_KEY]',
key,
},
};

`
3. In this example, App.tsx is calling this Test.tsx, just for the sake of separating the code

`tsx
import React from 'react';
import './App.css';
import { Test } from './components/Test';
// import TestHOC from './components/TestHOC';

function App() {
return (


);
}

export default App;
`

4. Call the useSplit hook to evaluate your flag

`tsx
import React from 'react';
import { useSplit } from 'split-react';

export const Test = ({ splitName }: { splitName: string }) => {
const split = useSplit(splitName, false);
const color = split ? '#00FF00' : '#FF0000'
return (


The flag {splitName} is {split ? 'ON' : 'OFF'}


);
};
`

5. If you prefer, you may use the HOC instead of the Hook, as exemplified with TestHOC component. To do so, simply uncomment those lines above (on App.tsx`) to start using it.

See it in action 🎥


$3

Now your React application will avoid unnecessary re-renders on components hooked with Split flags.