You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

react-tggl-client

Package Overview
Dependencies
1
Maintainers
0
Versions
10
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-tggl-client

Tggl React wrapper


Version published
Maintainers
0
Created

Readme

Source

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.

FAQs

Package last updated on 21 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc