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.
1. Install and import package
npm i @pataflags/sdk-react
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>;
};
<KProvider apiKey={'YOUR_API_KEY'} user={user} options={YOUR_OPTIONS}>
useReleaseToggles
is a custom hook that returns all release toggles. const allReleaseToggles = useReleaseToggles();
useIsEnabled
is a custom hook that returns a one release toggle status.const myAwesomeFeature = useIsEnabled('myAwesomeFeature');
useRemoteConfigs
is a custom hook that returns all remote configs.const allRemoteConfigs = useRemoteConfigs();
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
is a custom hook that returns an evaluation object.const evaluation = useEvaluation();
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
is a custom hook for force manual polling.const refresh = useRefresh();
refresh();
<ReleaseToggle releaseToggleKey='myAwesomeFeature'>
<div>is ON</div>
</ReleaseToggle>
Last modified 2yr ago