# @incognitus/client-react

> Incognitus react client

Latest version **1.0.1** (published 2021-01-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @incognitus/client-react
pnpm add @incognitus/client-react
yarn add @incognitus/client-react
bun add @incognitus/client-react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-01-17 |
| First published | 2021-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 16.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Incognitus |
| Maintainers | stummej, incognitus-admin |
| Keywords | feature-flags, feature-toggle, feature, toggle, flags, incognitus |

## Links

- npm: https://www.npmjs.com/package/@incognitus/client-react
- Repository: git@github.com:Incognitus-Io/client-react
- Homepage: https://github.com/Incognitus-Io/client-react#readme
- Issues: https://github.com/Incognitus-IO/client-react/issues
- npm.io page: https://npm.io/package/@incognitus/client-react

## Dependencies (1)

- [@incognitus/client-web-core](https://npm.io/package/@incognitus/client-web-core.md) ^1.0.1

## Recent versions

- 1.0.1 (latest) — 2021-01-17
- 1.0.1-pre.2 (next) — 2021-01-17
- 1.0.1-pre.1 — 2021-01-17
- 1.0.0 — 2021-01-17
- 1.0.0-pre.5 — 2021-01-17
- 1.0.0-pre.4 — 2021-01-17

## README

# Incognitus Feature Flag

![Continuous Integration](https://github.com/Incognitus-Io/client-react/workflows/Continuous%20Integration/badge.svg)
[![codecov](https://codecov.io/gh/Incognitus-Io/client-react/branch/master/graph/badge.svg?token=HJ4XoCv8oZ)](https://codecov.io/gh/Incognitus-Io/client-react)

## Usage

Install this as your projects's dependency

```
npm i @incognitus/client-react
# or
yarn add @incognitus/client-react
```

## Installing the plugin

Before you're able to use the service you'll need to install the plugin with your tenant and application IDs.

### App.tsx

```tsx
import { useInitIncognitus } from '@incognitus/client-react';
function App() {
  useInitIncognitus({
    tenantId: 'f632ac6a71e57bc77a8cb7d04c8704e52b9a5538',
    applicationId: 'fecf1202.8edffdf0',
  });
}
```

| Key           | Description                               |
| ------------- | ----------------------------------------- |
| tenantId      | Your tenant id                            |
| applicationId | The id of the application and environment |

## Checking features

### Component

You can use the included component to check feature flags. This is transparent and will not add an extra depth in the
DOM. Using slots, you can configure different aspects like the loading state, or if the flag is enabled/disabled.

```tsx
import FeatureFlag, {
  FeatureFlagLoading,
  FeatureFlagEnabled,
  FeatureFlagDisabled,
} from '@incognitus/client-react';

<FeatureFlag flag="feature name">
  <FeatureFlagLoading>
    <div>Loading</div>
  </FeatureFlagLoading>
  <FeatureFlagEnabled>
    <div>Enabled</div>
  </FeatureFlagEnabled>
  <FeatureFlagDisabled>
    <div>Disabled</div>
  </FeatureFlagDisabled>
</FeatureFlag>;
```

#### Props

| Prop   | Description                           |
| ------ | ------------------------------------- |
| flag   | The name of the feature flag          |
| hidden | Hide content when the flag is enabled |

#### Slots

| Slot                | Description                              |
| ------------------- | ---------------------------------------- |
| FeatureFlagLoading  | Displayed when fetching the feature flag |
| FeatureFlagEnabled  | Rendered when the flag is enabled        |
| FeatureFlagDisabled | Rendered when the flag is disabled       |

### React hook

If you would like to interact with the service directly, then it can be accessed through the `useIncognitus` hook.
This returns `isReady` which returns `true` when the service is initiatlized and ready to be used, and `service`
which returns the raw service

#### Service methods

| Method                          | Description                                                 |
| ------------------------------- | ----------------------------------------------------------- |
| service.isEnabled(featureName)  | Checks if the flag is enabled                               |
| service.isDisabled(featureName) | Check if the flag is disabled                               |
| service.getFeature(featureName) | Fetches the feature from the server and returns it's status |
| service.getAllFeatures()        | Fetches all features and stores them in the cache           |

### Service

You can also use the service directly by importing `IncognitusService.instance`, however this is not recommended.

## Caching

Currently all known feature flags are cached when the app initializes. New features that are not found
in the cache are retrieved on-demand. The cache stays in place until the app is reloaded or by calling the `getAllFeatures()` method on the service.

---
_Source: https://npm.io/package/@incognitus/client-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._