A [Split.io](https://www.split.io/) library to easily manage splits in React.
npm install react-splitioA Split.io library to easily manage splits in React.
- Installation
- Configuration
- Usage
- Contributions
- All Available Scripts
- TODO
``console`
samuelcastro@mac:~$ yarn add react-splitio
`console`
samuelcastro@mac:~$ npm install react-splitio
On your root component define the Split provider:
`tsx
const SDK_CONFIG_OBJECT = {
core: {
authorizationKey: 'YOUR_API_KEY',
key: 'key',
trafficType: 'A_TRAFFIC_TYPE',
},
};
`
Learn more about how to create your SDK_CONFIG_OBJECT:
Note that if your SDK_CONFIG_OBJECT is defined inside of a component it will create unnecessary work for SplitProvider,previousConfig !== newConfig
because the object will have a different identity each render ().
Instead define config outside of your component:
`tsx
const SDK_CONFIG_OBJECT = { ... };
const Root = () => (
)
`
Or if you need to configure dynamically, memoize the object:
`tsx`
const MySplitProvider = ({ trafficType, children }) => {
const config = useMemo(
() => ({
core: {
authorizationKey: '',
trafficType,
},
}),
[trafficType],
);
return
};
Split allows you to implement a custom impression listener.
SplitProvider has an optional convenience onImpression callback you can use instead.
`tsx`
// do something with the impression data.
}}>
Now assuming you have a split named feature1 you can do something like:
`tsx`
const [feature1, config] = useSplit('feature1');
if (feature1 === 'on') {
return
}
Optional attributes
can also be passed in:
`tsx`
const [feature1, config] = useSplit('feature1', { paying_customer: true });
`tsx`
{(value: TreatmentWithConfig) =>
value.treatment === 'on' ? this.renderComponent() : null
}
You can optionally pass a list of splits:
`tsx`
{(values: TreatmentsWithConfig) => {
console.log(values);
// {
// feature1: { treatment: 'on', config: null }
// feature2: { treatment: 'off', config: '{"bannerText":"Click here."}' }
// }
return something;
}}
And also, optional attributes
can be passed in:
`tsx`
{(values: TreatmentsWithConfig) => {...}
We have a useTrack hook which returns the a function with the same signature asclient.track.
`tsx`
const track = useTrack();
function handleClick() {
const queued = track('user', 'click', 'the_button', { foo: 'bar' });
}
We also support multiple clients instantiation as described in the Split.io documentation.
All you need to do is wrap your Split component with SplitClient passing splitKey and opttionally trafficType like so:
`tsx`
To start contributing first of all fork the project, to fork just click in the Fork button and then clone your own forked version of react-splitio.
`console`
samuelcastro@mac:~$ git clone https://github.com/[YOUR_USER]/react-splitio.git
samuelcastro@mac:~$ cd react-splitio
samuelcastro@mac:~/react-splitio$
On react-splitio install all dependencies running: yarn or npm
`console`
samuelcastro@mac:~/react-splitio$ yarn
In order for create more organized and meaningful commits I'm using commitizen. Commitizen has been added as a dev dependancy.
To add a commit, you can run:
`console`
samuelcastro@mac:~/react-splitio$ yarn commit or npm run commit
This command will run ts-lint and prettier to format your code if everything is ok.
In the project directory, you can run:
Builds the app for production to the build` folder.
It uses Typescript TSC tool to compile files into CommonJS
Runs unit tests
Utilizes commitizen to properly version the commit. While running the command you will be asked to classify the commit.
Run tslint.
Run prettier to format code.
Run prettier and lint auto fix
I'm using Yalc to manage local and custom npm packages. Yalc was developed to help us publish/install node modules without need to publish them on NPM, it's better and optmized option than yarn/npm link.
Update local custom node modules packages
- Unit tests
- Integrate Semantic Release to automate the releasing process.