The plugin provides an easy integration for the React Client SDK of Split.io to use Feature Flags within GatsbyJS.
with yarn
yarn add gatsby-plugin-splitio
with npm
npm install --save gatsby-plugin-splitio
- Get an account at Split.io
- Get the authorizationKey in the app of Split.io
Admin Settings -> API Keys -> Javascript SDK (browser)
- Get the key at
Admin Settings -> All Environments
Add the plugin with the respective options in your gatsby-config.js
:
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-splitio`,
options: {
authorizationKey: ``,
key: ``,
},
},
],
}
Place the TestToggle component into your components directory and use it in one of your pages. Rename YOUR_FEATURE
to one of the feature names you added to your Split account.
// TestToggle.js
import React from 'react'
import { SplitTreatments } from 'gatsby-plugin-splitio'
const feature = 'YOUR_FEATURE'
const TestToggle = () => (
<SplitTreatments names={[feature]}>
{({ treatments }) => {
const treatment = treatments[feature].treatment
return (
<>
{treatment === 'on' ? (
<VariantOne treatment={treatment} feature={feature} />
) : (
<VariantTwo treatment={treatment} feature={feature} />
)}
</>
)
}}
</SplitTreatments>
)
function VariantOne({ treatment, feature }) {
return (
<div style={{ padding: `1rem`, backgroundColor: `HONEYDEW` }}>
<h2>Component: Variant One</h2>
<p>
Feature: <b>{feature}</b> with{' '}
<a href="https://help.split.io/hc/en-us/articles/360038825091-React-SDK#using-the-sdk">
Split.io
</a>{' '}
is {treatment}
</p>
</div>
)
}
function VariantTwo({ treatment, feature }) {
return (
<div style={{ padding: `1rem`, backgroundColor: `LAVENDERBLUSH` }}>
<h2>Component: Variant Two</h2>
<p>
Feature: <b>{feature}</b> with{' '}
<a href="https://help.split.io/hc/en-us/articles/360038825091-React-SDK#using-the-sdk">
Split.io
</a>{' '}
is {treatment}
</p>
</div>
)
}
export default TestToggle
More detailed information describes the help page of Split.io
The plugin exposes these named exports:
- SplitTreatments
- SplitClient
- SplitContext
- useTreatments
- useManager
- useTrack
- withSplitTreatments
- withSplitClient
Please reach out for any question regarding this plugin or open a PR if you would like add or amend something.