# 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](https://koople.gitbook.io/koople/sdk-reference/javascript).
{% 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](https://koople.gitbook.io/koople/javascript#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](https://koople.gitbook.io/koople/javascript#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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://koople.gitbook.io/koople/sdk-reference/react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.