@unleash/proxy-client-react
Advanced tools
Comparing version 4.4.0 to 4.5.0
{ | ||
"name": "@unleash/proxy-client-react", | ||
"version": "4.4.0", | ||
"version": "4.5.0", | ||
"description": "React interface for working with unleash", | ||
@@ -53,3 +53,3 @@ "type": "module", | ||
"typescript": "^5.3.2", | ||
"unleash-proxy-client": "^3.5.2", | ||
"unleash-proxy-client": "^3.7.1", | ||
"vite": "^4.5.0", | ||
@@ -56,0 +56,0 @@ "vite-plugin-dts": "^3.6.3", |
@@ -11,4 +11,8 @@ # Installation | ||
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 | ||
@@ -46,2 +50,4 @@ or [Frontend API Access](https://docs.getunleash.io/reference/front-end-api) token. | ||
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. | ||
@@ -139,2 +145,32 @@ | ||
## 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 | ||
@@ -271,2 +307,4 @@ | ||
### localStorage | ||
IMPORTANT: This no longer comes included in the unleash-proxy-client-js library. You will need to install the storage adapter for your preferred storage solution. | ||
@@ -289,2 +327,9 @@ | ||
### startTransition | ||
If your version of React Native doesn't support `startTransition`, you can provide fallback implementation: | ||
```jsx | ||
<FlagProvider startTransition={fn => fn()} ></FlagProvider> | ||
``` | ||
# Migration guide | ||
@@ -291,0 +336,0 @@ |
64145
353