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
npm i @pataflags/sdk-react
Refer to the NPM release page to identify the latest version.
2. Initialize the SDK
import { KProvider } from "@pataflags/sdk-react";
​
const App = () => {
  const user = { id: 'aUserId' };
  
  return (
    <KProvider apiKey={'YOUR_API_KEY'} user={user}>
      <MyComponent />
    </KProvider>
  );
};
3. Get your values
const MyComponent = () => {
  const isEnabled = useIsEnabled('myAwesomeFeature');
  
  return isEnabled
    ? <div>is ON</div>
    : <div>is OFF</div>;
};
Customize the SDK
All customization options are the same as the Javascript SDK.
<KProvider apiKey={'YOUR_API_KEY'} user={user} options={YOUR_OPTIONS}>
Hooks
The next hooks are based on the JavaScript SDK methods.
useReleaseToggles
useReleaseToggles is a custom hook that returns all release toggles. 
const allReleaseToggles = useReleaseToggles();
useIsEnabled
useIsEnabled is a custom hook that returns a one release toggle status.
const myAwesomeFeature = useIsEnabled('myAwesomeFeature');
useRemoteConfigs
useRemoteConfigs is a custom hook that returns all remote configs.
const allRemoteConfigs = useRemoteConfigs();
useValueOf
useValueOf is a custom hook that returns one remote config value.
const theme = useValueOf('theme'); // Returns null if is empty
​
// OR
​
const theme = useValueOf('theme', 'light'); // Returns fallback if is empty
useEvaluation
useEvaluation is a custom hook that returns an evaluation object.
const evaluation = useEvaluation();
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.
const user = { id: 'aUserId' };
const identify = useIdentify();
​
identify(user);
useRefresh
useRefresh is a custom hook for force manual polling.
const refresh = useRefresh();
​
refresh();
Components
ReleaseToggle
<ReleaseToggle releaseToggleKey='myAwesomeFeature'>
    <div>is ON</div>
</ReleaseToggle>

Last modified 2yr ago