An open API service indexing awesome lists of open source software.

https://github.com/medigo/laika-react

A React client for Laika :dog:
https://github.com/medigo/laika-react

feature-flags feature-toggles laika react

Last synced: about 2 months ago
JSON representation

A React client for Laika :dog:

Awesome Lists containing this project

README

        

# laika-react
This NPM package connects React applications with the Laika feature flag service (https://github.com/MEDIGO/laika)

## Installation

Yarn:

```
yarn add laika-react
```

npm:

```
npm install -S laika-react
```

## Usage

### React Hook

#### Without context:

```tsx
import React from 'react'
import { useLaika } from 'laika-react'
/* ... import your components ... */

const uri = 'https://laika.example.com'
const env = 'prod'

function SomeComponent() {
const [featureNewComponent] = useLaika('new-component', uri, env)

return (


{featureNewComponent ? : }

)
}
```

#### With context:

```tsx
import React from 'react'
import { useLaika, Config, LaikaContext } from 'laika-react'
/* ... import your components ... */

const ctx: Config = {
uri: "https://laika.example.com",
env: "prod",
timeout: 60 * 1000, // 1 minute cache timeout
}

function App() {
return (



)
}

function SomeComponent() {

// We can leave out the parameters that we provided in the context
const [featureNewComponent] = useLaika('new-component')

return (


{featureNewComponent ? : }

)
}
```

### Component

```tsx
import React from 'react'
import { useLaika, Config, LaikaContext, Laika } from 'laika-react'
/* ... import your components ... */

const uri = 'https://laika.example.com'
const env = 'prod'

function SomeComponent() {
return (


}
onFalse={}
/>

)
}
```

### Promise (getFeatureStatus)

```ts
import { getFeatureStatus } from 'laika-react'

getFeatureStatus('NEW_FEATURE', 'http://example.com', 'prod')
.then(status => {
if (status) {
console.log('feature enabled')
}
})
```

## Notes

* It is strongly recommended to use the ESLint rule `@typescript-eslint/strict-boolean-expressions`, in order to prevent accidentally doing something like this:
```ts
// Oops! Forgot to destructure here!
const featureNewComponent = useLaika('new-component')

// This will always be true since useLaika returns an array!
if(featureNewComponent) {
// ...
}

// This will always return a promise, so it's always true!
if(getFeatureStatus('NEW_FEATURE', 'http://example.com', 'prod')) {
// ...
}
```

## API

### `useLaika` Hook

Fetches a flag from the Laika server and stores it in the components state.

Using a context allows you to skip the servers address and environment parameters and load them from the context instead.

```ts
function useLaika(
feature: string,
uri?: string,
env?: string,
cacheTimeout?: number,
): [boolean, boolean]
```

Parameter | Function
---|---
`feature`| The name of the feature flag on Laika
`uri` | The uri to the laika service (for example `https://laika.example.com`
`env` | The Laika env (for example `test` or `prod`)
`cacheTimeout` | The time how long a requested flag should be cached (default: 1.5 minutes).
The flags and cache timestamps are saved in localstorage.
***Return values*** | Returns an array with 2 entries:
1. `state`: The current state of the flag (`true` or `false`, defaults to `false` while the request is still resolving)
2. `isLoading`: The second entry is true if it's still requesting the flag from the server and false if it's finished loading (useful for displaying loading indicators for example)

### `Laika` component

```tsx
interface LaikaProps {
feature: string
env?: string
uri?: string
cacheTimeout?: number,
onTrue: React.ReactElement | false
onFalse: React.ReactElement | false
}
```

Works analog to the `useLaika` hook, except that it's a component.
It will not render any children while the request is still loading the feature flag from Laika.

### `getFeatureStatus` utility function

Retrieves the feature flag from the API and returns a promise that can be `await`ed.

The parameters are the same as in the `useLaika` hook.

```ts
async function getFeatureStatus(
feature: string,
uri: string,
env: string,
timeout?: number,
): Promise
```

## License

MIT Licensed. Copyright (c) Medigo GmbH 2021.