https://github.com/wheniwork/ld-redux-components
[DEPRECATED] Launch Darkly Helper Components that leverage the ld-redux libary
https://github.com/wheniwork/ld-redux-components
Last synced: 5 months ago
JSON representation
[DEPRECATED] Launch Darkly Helper Components that leverage the ld-redux libary
- Host: GitHub
- URL: https://github.com/wheniwork/ld-redux-components
- Owner: wheniwork
- License: mit
- Created: 2018-04-27T16:14:36.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T04:13:18.000Z (over 3 years ago)
- Last Synced: 2025-10-22T08:10:38.770Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 864 KB
- Stars: 5
- Watchers: 5
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ld-redux-components
[](https://www.npmjs.com/package/ld-redux-components) [](https://www.npmjs.com/package/ld-redux-components) [](https://www.npmjs.com/package/ld-redux-components) [](https://github.com/wheniwork/ld-redux-components/blob/master/LICENSE) 
## Deprecation Notice
⚠️ This is deprecated software ⚠️. See [React SDK Reference](https://docs.launchdarkly.com/sdk/client-side/react/react-web) for instructions on how to use the LaunchDarkly React SDK, including usage with [React Hooks](https://docs.launchdarkly.com/sdk/client-side/react/react-web#hooks).
## Description
> Feature Flag Components for Launch Darkly that work seemlessly with redux
_ld-redux-components_ is a helper library for Launch Darkly in React that relies on your feature flags being stored in redux.
It is recommended that you use [ld-redux](https://github.com/yusinto/ld-redux), as it provides an easy and clean way to connect Launch Darkly flags to redux, and works as a nice wrapper for [ldclient-js](https://github.com/launchdarkly/js-client).
## Getting Started
You should define your Launch Darkly redux strategy before using _ld-redux-components_. It won't work without your flags in redux. As stated above, [ld-redux](https://github.com/yusinto/ld-redux) is the best option, but the only compatability requirement is that you nest your flags in an object of key/value pairs under a key in the base of your redux store. Here is an example of what your store might look like,
```javascript
{
...,
"LD": {
"debugger": true,
"newFeature": "on",
"tasks": false,
},
...,
}
```
(note: the above example is using `camelCase` as _ld-redux_ does, but you can store the flags as `lisp-case` if you so choose)
## Installation
```bash
yarn add ld-redux-components
# or
npm install ld-redux-components
```
## Quickstart
1. In your client bootstrap, initialize _ld-redux-components_:
```jsx
import { ldrComponentConfig } from 'ld-redux-components';
//This value will be the key in your redux store where your flags are stored
ldrComponentConfig.init({
reduxKey: "LD"
});
```
2. Import and use `Feature` and `Variant` helper components in a component:
```jsx
import React, { Component } from 'react';
import { Feature, Variant } from 'ld-redux-components';
import { Item } from '/item';
export default class FeatureDisplay extends Component {
render() {
return (
);
}
}
```
Boom! `ld-redux-components` is working! Notice how there is no need to connect your component, as the `Feature` component does that heavy lifting for you. Just add `Feature` and `Variant` components where you please.
## Components
### `Feature`
#### props
| name | type | required | default | description |
| ----------- | ------------------------- | -------- | ------- | --------------------------------- |
| `flagName` | string | `true` | - | name of flag stored in redux |
| `variation` | string, bool, array, null | `false` | - | value of flag |
| `onReady` | function | `false` | - | callback fired when ld connected |
| `waitForLD` | bool | `false` | `false` | wait to render until ld connected |
| `liveUpdate` | bool | `false` | `true` | rerender after initial LD load |
#### Usage Details
* `Feature` is primarily used as a wrapper of `Variant` components.
* For cases where you only need to either show or not show something, you can set the `variation` prop. This allows you to avoid using unnecessary `Variant` components when you only have one variation you care about.
* `variation` should not be set if you plan on using `Variant` components underneath `Feature`.
#### Examples
`Feature`
```jsx
import React, { Component } from 'react';
import { Feature, Variant } from 'ld-redux-components';
import { Item } from '/item';
export default class Display extends Component {
render() {
return (
);
}
}
```
`Feature` with `variation` prop set and no `Variant` components
```jsx
import React, { Component } from 'react';
import { Feature } from 'ld-redux-components';
import { Item } from '/item';
export default class Display extends Component {
render() {
return (
);
}
}
```
### `Variant`
`Variant` MUST be defined underneath a `Feature` component
#### props
| name | type | required | default | description |
| ----------- | ------------------------- | -------- | ------- | ----------------------------------- |
| `variation` | string, bool, array, null | `false` | - | value of flag |
| `isDefault` | bool | `false` | false | display on null/undefined variation |
#### Usage Details
* Must be defined underneath `Feature` component
* Will always evaluate against the closest parent `Feature` component (yes, this means you can nest Feature/Variants in other Feature/Variants, and Variants can be deeply nested under Features)
* `isDefault` can be used as handler in case a flag is undefined or set to null. You can use this in combination with `variation`, or by itself
#### Examples
Two Variants
```jsx
import React, { Component, Fragment } from 'react';
import { Feature, Variant } from 'ld-redux-components';
import { Item } from '/item';
export default class Display extends Component {
render() {
return (
);
}
}
```
Multiple Variants
```jsx
import React, { Component, Fragment } from 'react';
import { Feature, Variant } from 'ld-redux-components';
import { Item } from '/item';
export default class Display extends Component {
render() {
return (
);
}
}
```
Variant with isDefault
```jsx
import React, { Component, Fragment } from 'react';
import { Feature, Variant } from 'ld-redux-components';
import { Item } from '/item';
export default class Display extends Component {
render() {
return (
);
}
}
```
Deeply Nested Variant
```jsx
import React, { Component, Fragment } from 'react';
import { Feature, Variant } from 'ld-redux-components';
import { Item } from '/item';
import { SomeOtherComponent } from '/someOtherComponent';
export default class Display extends Component {
render() {
return (
);
}
}
```
Feature/Variants Nested under Feature/Variants
```jsx
import React, { Component, Fragment } from 'react';
import { Feature, Variant } from 'ld-redux-components';
import { Item } from '/item';
export default class Display extends Component {
render() {
return (
);
}
}
```
#
## Misc.
For a working example, check this [example app](https://github.com/wheniwork/ld-redux-components-example) out (you'll need to provide your own credentials and flags to get things working locally)
## Contributions
Welcome!