A simple Unleash client for React
npm install unleash-client-reactThe basic strategies and metrics are not implemented by default as other clients of Unleash have.
Currently this lib can only hide or show React components based on the Unleash config (server) and the strategies that you provide, it will not register client or send metrics.
By default every child of FeatureToggle will be hidden, if a page loads before UnleashProvider has fetched the features, the feature will not be shown until the server response comes back
You can pass disabled to UnleashProvider so it will not hide any children of FeatureToggle
``bash`
npm install unleash-client-react
or
`bash`
yarn unleash-client-react
The idea is to mount UnleashProvider on the root of the app and import and use FeatureToggle where needed
js
import React from "react"
import { UnleashProvider, FeatureToggle } from "unleash-client-react"export default () => (
)
`$3
Unleash providers accept a prop in the following format:
`js
{
"strategyName": (parameters, context) => boolean,
"anotherStategy": (parameters, context) => boolean
}
`Where parameters is received from the Unleash server and context is the same object that you can pass to
UnleashProvider, you must return a boolean, true will show the feature, false will hide itAlso remember that you have to register the strategy names and its parameters on
Unleash interface#### Example of usage with context and customStrategyExecutors
Let's assume that there is a a feature that we what to call
quick-order in the Unleash admin panel, that will have a single strategy called show-if-user-id-is-less-than and has the parameter userId with the value 50The strategy
show-if-user-id-is-less-than is not implemented by default, so we have to define it, also, we need to pass the user id by context`js
import React from "react"
import { UnleashProvider, FeatureToggle } from "unleash-client-react"export default () => (
url="https://unleash.herokuapp.com/"
context={{
user: {
id: 10
}
}}
customStrategyExecutors={{
show-if-user-id-is-less-than: (parameters, context) =>
context.user.id < parameters.userId
}}
>
)
`
$3
You may configure the disabled based on a env variable, this way, any children of every
FeatureToggle will not be hidden in any case`js
import { UnleashProvider, FeatureToggle } from "unleash-client-react"export default () => (
disabled={process.env.NODE_ENV !== "production"}
>