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:
- Host: GitHub
- URL: https://github.com/medigo/laika-react
- Owner: MEDIGO
- License: mit
- Created: 2019-08-30T08:54:21.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-01-27T18:04:12.000Z (5 months ago)
- Last Synced: 2025-04-10T18:11:14.231Z (2 months ago)
- Topics: feature-flags, feature-toggles, laika, react
- Language: TypeScript
- Homepage:
- Size: 52.4 MB
- Stars: 2
- Watchers: 3
- Forks: 5
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
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.