This NPM package connects React applications with the Laika feature flag service (https://github.com/MEDIGO/laika)
Yarn:
yarn add laika-react
npm:
npm install -S laika-react
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 (
<div>
{featureNewComponent ? <NewComponent /> : <OldComponent />}
</div>
)
}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 (
<LaikaContext.Provider value={ctx}>
<SomeComponent/>
</LaikaContext.Provider>
)
}
function SomeComponent() {
// We can leave out the parameters that we provided in the context
const [featureNewComponent] = useLaika('new-component')
return (
<div>
{featureNewComponent ? <NewComponent /> : <OldComponent />}
</div>
)
}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 (
<div>
<Laika
feature="component-test"
uri={uri} // You can leave out uri and env just like with the
// hook and have them be loaded from the context if you provided one
env={env}
onTrue={<NewComponent />}
onFalse={<OldComponent />}
/>
</div>
)
}import { getFeatureStatus } from 'laika-react'
getFeatureStatus('NEW_FEATURE', 'http://example.com', 'prod')
.then(status => {
if (status) {
console.log('feature enabled')
}
})- It is strongly recommended to use the ESLint rule
@typescript-eslint/strict-boolean-expressions, in order to prevent accidentally doing something like this:// 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')) { // ... }
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.
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) |
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.
Retrieves the feature flag from the API and returns a promise that can be awaited.
The parameters are the same as in the useLaika hook.
async function getFeatureStatus(
feature: string,
uri: string,
env: string,
timeout?: number,
): Promise<boolean>MIT Licensed. Copyright (c) Medigo GmbH 2021.