Koople
Search…
React
This document explains all the methods available in the client-side React SDK.
React SDK is based on the JavaScript SDK. For a more detailed explanation, consult the JavaScript SDK.

Getting started

If still not registered, sign up and create an account at https://koople.io.
1. Install and import package
1
npm i @pataflags/sdk-react
Copied!
Refer to the NPM release page to identify the latest version.
2. Initialize the SDK
1
import { KProvider } from "@pataflags/sdk-react";
2
3
const App = () => {
4
const user = { id: 'aUserId' };
5
6
return (
7
<KProvider apiKey={'YOUR_API_KEY'} user={user}>
8
<MyComponent />
9
</KProvider>
10
);
11
};
Copied!
3. Get your values
1
const MyComponent = () => {
2
const isEnabled = useIsEnabled('myAwesomeFeature');
3
4
return isEnabled
5
? <div>is ON</div>
6
: <div>is OFF</div>;
7
};
Copied!

Customize the SDK

All customization options are the same as the Javascript SDK.
1
<KProvider apiKey={'YOUR_API_KEY'} user={user} options={YOUR_OPTIONS}>
Copied!

Hooks

The next hooks are based on the JavaScript SDK methods.

useReleaseToggles

useReleaseToggles is a custom hook that returns all release toggles.
1
const allReleaseToggles = useReleaseToggles();
Copied!

useIsEnabled

useIsEnabled is a custom hook that returns a one release toggle status.
1
const myAwesomeFeature = useIsEnabled('myAwesomeFeature');
Copied!

useRemoteConfigs

useRemoteConfigs is a custom hook that returns all remote configs.
1
const allRemoteConfigs = useRemoteConfigs();
Copied!

useValueOf

useValueOf is a custom hook that returns one remote config value.
1
const theme = useValueOf('theme'); // Returns null if is empty
2
3
// OR
4
5
const theme = useValueOf('theme', 'light'); // Returns fallback if is empty
Copied!

useEvaluation

useEvaluation is a custom hook that returns an evaluation object.
1
const evaluation = useEvaluation();
Copied!

useIdentify

useIdentify is a custom hook for identify user. Commonly is used when the user makes sign-in. It returns a function that receives a user.
1
const user = { id: 'aUserId' };
2
const identify = useIdentify();
3
4
identify(user);
Copied!

useRefresh

useRefresh is a custom hook for force manual polling.
1
const refresh = useRefresh();
2
3
refresh();
Copied!

Components

ReleaseToggle

1
<ReleaseToggle releaseToggleKey='myAwesomeFeature'>
2
<div>is ON</div>
3
</ReleaseToggle>
Copied!
Last modified 11mo ago