@twoflags/react-twoflags v0.2.0

react-twoflags

React helper components and hooks for twoflags.io Feature Flags service.

You need to create a twoflags.io account or use the on-premise service.

Usage

react-twoflags contains several ways to query and use feature flags from twoflags.io.

First is using a Provider component that wraps your application.

import * as React from 'react'
import { TwoFlagsProvider } from '@twoflags/react-twoflags'

const CLIENT_ID = '<account-id>'
const NAMESPACE = '<app-namespace>'

const App: React.FC = () => {
  return (
    <TwoFlagsProvider 
      clientID={CLIENT_ID} 
      namespace={NAMESPACE}
    >
      <AppComponents />
    </TwoFlagsProvider>  
  )
}

export default App

This will provide a context with the loaded feature flags with default refresh rate of 60 seconds (minimum refresh rate is 30 seconds) and a immediate flag refresh on page visibility.

Other properties for the TwoFlagsProvider component are:

• clientID (string): TwoFlags Account ID
• namespace (string): TwoFlags namespace ID
• twoflagsAPI? (string): For on-premise services or compatible services
• fetchInterval? (number): Fetch interval in seconds (minimum is 30 seconds)
• logging? ((flags: Flags) => any): Logging function, receives the flags on first fetch and every time they change

Once you have the context in place from any component inside it you can access the feature flags by using the useFeatureFlags hook or in places where hooks cannot be used then you can use the getRuntimeFeatureFlags function.

Using useFeatureFlags hook

import * as React from 'react'
import { useFeatureFlags } from '@twoflags/react-twoflags'

export const DummyComponent: React.FC = () => {
  const flags = useFeatureFlags()
  
  return (
    <Pane>
      {flags.maintenance && (
        <Alert intent='danger'>
          MAINTENANCE MODE
        </Alert>  
      )}
      
      <SomeOtherComponents />
    </Pane>
  ) 
}

Using getRuntimeFeatureFlags function

import { getRuntimeFeatureFlags } from '@twoflags/react-twoflags'

export const fetchData = async () => {
  const flags = getRuntimeFeatureFlags()
  
  const response = await fetch(`${flags['apiUrl']}/data`)
  const data = await response.json()
  
  return data    
}

Server Side Rendering (SSR)

Server Side Rendering is also supported via a third function getFeatureFlags

Now, from the client the twoflags flags resolver uses the origin of the request to match the environment we are requesting. This helps support truly agnostic frontend builds. You can deploy your frontend application to any environment using the exact same code, letting TwoFlags provide the runtime environments flags dynamically.

On the server on the other hand we don't have an origin HTTP header. But since we do have a server, it will always know in what environment is running so, for server side rendering we can use the getFeatureFlags asynchronous function in this case explicitly providing the environment.

This example code shows how it will work on NextJS:

import * as React from 'react'
import { getFeatureFlags } from '@twoflags/react-twoflags'
import { NextPage } from 'next'
import { DataComponent } from '../components/DataComponent'

interface Props {
  data: any
}

const Page: NextPage<Props> = ({ data }) => {
  return (
    <div>
      <DataComponent data={data} />
    </div>
  ) 
}

Page.getInitialProps = async () => {
  const flags = await getFeatureFlags({
    clientID: process.env.CLIENT_ID,
    namespace: process.env.NAMESPACE,
    environment: process.env.ENVIRONMENT
  })

  const response = await fetch(`${flags['api-url']}/data`)
  const data = await response.json()
  
  return { data }
}