react-tggl-client
v2.0.0
Published
Tggl React wrapper
Downloads
841
Readme
Tggl React client
Usage
Add the client to your dependencies:
npm i react-tggl-client
Add the provider to your app:
import { TgglClient, TgglProvider } from 'react-tggl-client'
// Instanciate it outside of your component
const client = new TgglClient('YOUR_API_KEY')
const App = () => {
return (
<TgglProvider client={client}>
<h1>Your app</h1>
</TgglProvider>
)
}
You can optionally pass a context to the provider:
const App = () => {
return (
<TgglProvider client={client} initialContext={{ /*...*/ }}>
<h1>Your app</h1>
</TgglProvider>
)
}
⚠️ Updating the value of initialContext
will have no effect, keep reading on how to update the context.
You can now change the context anywhere in the app using the useTggl
hook:
import { useTggl } from 'react-tggl-client'
const MyComponent = () => {
const { setContext } = useTggl()
return (
<button onClick={() => setContext({ foo: 'bar' })}>
My button
</button>
)
}
setContext
completely overrides the current context, you can use updateContext
to partially update some keys:
const MyComponent = () => {
const { updateContext } = useTggl()
return (
<button onClick={() => updateContext({ foo: 'bar' })}>
My button
</button>
)
}
Use the useFlag
hook to get the state of a flag:
const MyComponent = () => {
const { active } = useFlag('myFlag')
//...
}
You may also get the value of a flag:
const MyComponent = () => {
const { value } = useFlag('myFlag')
//...
}
If a flag is inactive, deleted, or in-existent, value
will be undefined
. You can specify a default value for inactive flags:
const MyComponent = () => {
const { value } = useFlag('myFlag', 42)
//...
}
⚠️ If the default value is an object, make sure to memoize it with useMemo
for performance.
Additionally, you can get the loading and error state of the flag:
const MyComponent = () => {
const { active, value, loading, error } = useFlag('myFlag')
//...
}
loading
is true when the context is being updated.
While loading, the error
is always null.
⚠️ You should only read the value
, loading
, or error
if you intend to use them.
This will ensure optimal re-renders.