> For the complete documentation index, see [llms.txt](https://koople.gitbook.io/koople/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://koople.gitbook.io/koople/sdk-reference/react.md).

# React

This document explains all the methods available in the client-side React SDK.

{% hint style="info" %}
React SDK is based on the JavaScript SDK. For a more detailed explanation, consult the [JavaScript SDK](/koople/sdk-reference/javascript.md).
{% endhint %}

## 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
```

{% hint style="info" %}
Refer to the [NPM](https://www.npmjs.com/package/@pataflags/sdk-react) release page to identify the latest version.
{% endhint %}

2\. Initialize the SDK

```javascript
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

```javascript
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](/koople/sdk-reference/javascript.md#customize-the-sdk).

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

## Hooks

The next hooks are based on the JavaScript SDK [methods](/koople/sdk-reference/javascript.md#methods).

### useReleaseToggles

`useReleaseToggles` is a custom hook that returns all release toggles.&#x20;

```javascript
const allReleaseToggles = useReleaseToggles();
```

### useIsEnabled

`useIsEnabled` is a custom hook that returns a one release toggle status.

```javascript
const myAwesomeFeature = useIsEnabled('myAwesomeFeature');
```

### useRemoteConfigs

`useRemoteConfigs` is a custom hook that returns all remote configs.

```javascript
const allRemoteConfigs = useRemoteConfigs();
```

### useValueOf

`useValueOf` is a custom hook that returns one remote config value.

```javascript
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.

```jsx
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.

```jsx
const user = { id: 'aUserId' };
const identify = useIdentify();

identify(user);
```

### useRefresh

`useRefresh` is a custom hook for force manual polling.

```jsx
const refresh = useRefresh();

refresh();
```

## Components

### ReleaseToggle

```jsx
<ReleaseToggle releaseToggleKey='myAwesomeFeature'>
    <div>is ON</div>
</ReleaseToggle>
```