Skip to content

Commit

Permalink
Docs/document events (#184)
Browse files Browse the repository at this point in the history
  • Loading branch information
FredrikOseberg authored Jan 14, 2025
1 parent 87555d1 commit 4dde7bf
Showing 1 changed file with 36 additions and 0 deletions.
36 changes: 36 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,12 @@ yarn add @unleash/proxy-client-react unleash-proxy-client

# How to use

This library uses the core [unleash-proxy-client](https://github.com/Unleash/unleash-proxy-client-js) JS client as a base.

## Initialize the client

*NOTE*: [unleash-proxy](https://github.com/Unleash/unleash-proxy) is in maintenance mode. It is recommend to use the [Frontend API](https://docs.getunleash.io/reference/front-end-api) or [unleash-edge](https://github.com/Unleash/unleash-edge) instead.

Prepare [Unleash Proxy](https://docs.getunleash.io/reference/unleash-proxy) secret
or [Frontend API Access](https://docs.getunleash.io/reference/front-end-api) token.

Expand Down Expand Up @@ -42,6 +46,8 @@ root.render(

To connect this SDK to your Unleash instance's [front-end API](https://docs.getunleash.io/reference/front-end-api), use the URL to your Unleash instance's front-end API (`<unleash-url>/api/frontend`) as the `url` parameter. For the `clientKey` parameter, use a `FRONTEND` token generated from your Unleash instance. Refer to the [_how to create API tokens_](https://docs.getunleash.io/how-to/how-to-create-api-tokens) guide for the necessary steps.

To connect this SDK to unleash-edge, follow the documentation provided in the [unleash-edge repository](https://github.com/unleash/unleash-edge).

To connect this SDK to the [Unleash proxy](https://docs.getunleash.io/reference/unleash-proxy), use the proxy's URL and a [proxy client key](https://docs.getunleash.io/reference/api-tokens-and-client-keys#proxy-client-keys). The [_configuration_ section of the Unleash proxy docs](https://docs.getunleash.io/reference/unleash-proxy#configuration) contains more info on how to configure client keys for your proxy.

## Check feature toggle status
Expand Down Expand Up @@ -134,6 +140,36 @@ const MyComponent = ({ userId }) => {
};
```

## Listening to events

The core JavaScript client emits various types of events depending on internal activities. You can listen to these events by using a hook to access the client and then directly attaching event listeners. Alternatively, if you're using the FlagProvider with a client, you can directly use this client to listen to the events. [See the full list of events here.](https://github.com/Unleash/unleash-proxy-client-js?tab=readme-ov-file#available-events)

NOTE: `FlagProvider` uses these internal events to provide information through `useFlagsStatus`.

```jsx
import { useUnleashContext, useFlag } from '@unleash/proxy-client-react';

const MyComponent = ({ userId }) => {
const client = useUnleashClient();

useEffect(() => {
if (client) {
const handleError = () => {
// Handle error
}

client.on('error', handleError)
}

return () => {
client.off('error', handleError)
}
}, [client])

// ...rest of component
};
```

# Advanced use cases

## Deferring client start
Expand Down

0 comments on commit 4dde7bf

Please sign in to comment.