Koople
  • Getting Started
  • Core Concepts
  • Using Koople
    • First steps
    • Release Toggles
      • Long-Live/Release toggles
    • Remote Config
    • Target Groups
    • Users
    • Flag references
    • Audit Log
    • Member Permissions
    • Environment Settings
    • API Keys
    • Plans
  • SDK Reference
    • JavaScript
    • React
    • C#
    • Java
  • Api Reference
    • Client (WIP)
    • Server (WIP)
  • Changelog
Powered by GitBook
On this page
  • Getting started
  • Customize the SDK
  • Hooks
  • useReleaseToggles
  • useIsEnabled
  • useRemoteConfigs
  • useValueOf
  • useEvaluation
  • useIdentify
  • useRefresh
  • Components
  • ReleaseToggle

Was this helpful?

  1. SDK Reference

React

PreviousJavaScriptNextC#

Last updated 4 years ago

Was this helpful?

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 .

Getting started

If still not registered, sign up and create an account at .

1. Install and import package

npm i @pataflags/sdk-react

Refer to the 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

<KProvider apiKey={'YOUR_API_KEY'} user={user} options={YOUR_OPTIONS}>

Hooks

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>

All customization options are the same as the .

The next hooks are based on the JavaScript SDK .

JavaScript SDK
https://koople.io
NPM
Javascript SDK
methods