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

$3

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

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

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

return <>{isSomeFeatureAvailable && };
};
`

$3

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

export const Page = () => {
return (
<>
name="flag2"
active={

Active feature content

}
inactive={

Inactive feature content

}
/>
name="flag1"
active={

Active feature2 content

}
inactive={

Inactive feature2 content

}
/>

);
};
`

$3

`typescript
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