@kode-frontend/feature-toggle-react

feature-toggle-react

Installation

$ yarn add @kode-frontend/feature-toggle-react

# or
$ npm i @kode-frontend/feature-toggle-react

How to use

1. Configure feature toggle

Create a feature-toggle directory in your project. Add some files:

File	Description	Example
config.ts	Initial feature toggle and config it.	config.ts
default-flags.ts	Default flags.	default-flags.ts
types.d.ts	Type declaration for provide flags keys types.	types.d.ts
ft-provider.tsx	Configure provider.	ft-provider.tsx

2. Wrap your app to FTProvider
3. Use feature toggles in your code.

API

useFeatureToggle

import { useFeatureToggle } from '@kode-frontend/feature-toggle-react';

export const Page = () => {
  const FT = useFeatureToggle();

  const isSomeFeatureAvailable = FT.hasFeatureFlag('someFlagName');

  return <>{isSomeFeatureAvailable && <SomeFeature />}</>;
};

FeatureToggle Component

import { FeatureToggle } from '@kode-frontend/feature-toggle-react';

export const Page = () => {
  return (
    <>
      <FeatureToggle
        name="flag2"
        active={<h2>Active feature content</h2>}
        inactive={<h3>Inactive feature content</h3>}
      />
      <FeatureToggle
        name="flag1"
        active={<h2>Active feature2 content</h2>}
        inactive={<h2>Inactive feature2 content</h2>}
      />
    </>
  );
};

Is fetching remote config

import { useFeatureToggle } from '@kode-frontend/feature-toggle-react';

export const Page = () => {
  const { hasFeatureFlag, isFetching } = useFeatureToggle();

  const isFlag3Available = hasFeatureFlag('someFlagName');

  if (isFetching) {
    return <>Loading...</>;
  }

  return <>{isFlag3Available && 'page content'}</>;
};

Development

$ yarn
$ yarn start

$ cd ./example

# yarn
# yarn start

Release

$ yarn build
$ GITLAB_TOKEN=your-gitlab-token yarn release

TODO

[ ] Add UI adapter