React Flagon

A vessel for your React flags.

Install

yarn add react-flagon or npm install --save react-flagon

Usage

Add the FlagonModal somewhere in your App.js file to be able to switch options on and off. And optionally the css file:

import 'react-flagon/lib/main.css';
import { FlagonModal } from 'react-flagon';
const isDev = process.env.NODE_ENV === 'development';

const MyApp = () => (
  . . .
  <FlagonModal isDev={isDev} />
  . . .
)

Note: Pass in the isDev flag to ensure the component is only rendered in development environments.

You can access the modal by pressing the backtick key (`). This is configurable in the options object.

Then use the useFlagon hook to retrieve a value:

import { useFlagonKey } from 'react-flagon'

const MyComponent = () => {
  const { getValue } = useFlagon()
  const [value, setValue] = useFlagonKey('isDebug', true)
  return(
    <div>
      <label><input type="checkbox" checked={value} onChanged={() => setValue(!value)} /> Debug Mode Active</label>
      <hr />
      {value && <p>This is only shown when the <code>isDebug</code> flag is checked. The value is also persisted in local storage.</p>}
    </div>
  )
}

Options

activationKey (string) [default = "`"]

Keyboard key to toggle visibility of modal. Defaults to backtick (`).

localStorageKey (string) [default = "flagon"]

Not implemented yet. The key which settings are stored in localstorage. Defaults to flagon.

hasStyles (boolean) [default = "true"]

true will use hashed classnames generated by css modules. false will render with human-readable classNames for fully custom styling. Defaults to true.

modalTitle (string) [default = "Flagon"]

Heading / title displayed in modal. Defaults to Flagon.

settings: (FlagonSetting[])

Array of settings objects. Defaults to a single item of isDebug.

key: (string)

The key the value will be stored under.

label: (string)

The label displayed in the modal.

type?: ("checkbox" | "text") [default = "text"]

The type of value to store. Currently only text for strings and checkbox for booleans are supported. Defaults to text (string).

initialValue: (boolean | string)

The initial value for value will be stored under.

Dev notes

If you yarn link / npm link this into a local project, you may run into a "Rule of Hooks" violation and get an error, such as Hooks can only be called inside the body of a function component. This is because there are 2 versions of React.

The workaround for this is:

Assuming my-app and react-flagon are sibling folders, run yarn link ../my-app/node_modules/react (or npm link ...) from react-flagon. This should make the react-flagon use the application’s own React copy.

For more info see this React Issue.