Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
ld-react-components
Advanced tools
Semantic component helpers to support LaunchDarkly in your react app.
Semantic component helpers to support LaunchDarkly in your react app.
Install node module
You can use npm
or yarn
however it is advised to choose one and stick with it. For the purposes of documentation yarn
is being used.
yarn add ld-react-components
import {
FeatureFlag,
FeatureSwitch,
FeatureCase,
FeatureTrue,
FeatureFalse
} from 'ld-react-components';
this._ldclientPromise = launchDarklyClient.initWithPromise(
user,
this._sdkKey,
500
);
const endpoints = {
baseUrl: 'https://app.launchdarkly.com',
eventsUrl: 'https://events.launchdarkly.com',
streamUrl: 'https://stream.launchdarkly.com',
baseTimeout: 100
};
this._ldclientPromise = launchDarklyClient.initWithPromise(
user,
this._sdkKey,
endpoints,
500
);
Takes flagKey
and appFlags
as props
, which is an object containing list of features.
const applicationKeys = {
'integration-test': { value: true, version: 3 },
'multivariate-test': { value: 'multivariate-test-1', version: 5 }
}
<FeatureFlag flagKey="multivariate-test" appFlags={applicationKeys}></FeatureFlag>
FeatureSwitch
should be a child of FeatureFlag
and can take FeatureCase
and FeatureDefault
as children.
FeatureCase
component takes condition
and allowBreak
(a boolean) as props,
condition
is the case
feature, while allowBreak
used as a break
. The reason for name change is case
and break
are reserved words on JS.
<FeatureFlag flagKey="multivariate-test" appFlags={applicationKeys}>
<FeatureSwitch>
<FeatureCase condition="multivariate-test-1" allowBreak>
<p>Multivariate Test 1 Rendered</p>
</FeatureCase>
<FeatureCase condition="multivariate-test-2" allowBreak>
<p>Multivariate Test 2 Rendered</p>
</FeatureCase>
<FeatureCase condition="multivariate-test-3" allowBreak>
<p>Multivariate Test 3 Rendered</p>
</FeatureCase>
<FeatureCase condition="multivariate-test-4" allowBreak>
<p>Multivariate Test 4 Rendered</p>
</FeatureCase>
<FeatureDefault>
<p>If no conditions are met then render the default</p>
</FeatureDefault>
</FeatureSwitch>
</FeatureFlag>
<FeatureFlag flagKey="integration-test" appFlags={applicationKeys}>
<FeatureTrue>
<p>If feature flag is true, then is content will render.</p>
</FeatureTrue>
<FeatureFalse>
<p>If feature flag is false, then is content will render.</p>
</FeatureFalse>
</FeatureFlag>
const applicationKeys = {
'multivariate-test': { value: 'multivariate-test-2', version: 1},
'integration-test': { value: true }
};
<FeatureFlag flagKey="false-test" appFlags={applicationKeys}>
<p>This non-component should get rendered</p>
This is also should get rendered.
<FeatureTrue>This one should throw a warning and wont be rendred</FeatureTrue>
<FeatureFalse>
this one should throw a warning and wont be rendred
</FeatureFalse>
<FeatureSwitch>
<FeatureCase condition="multivariate-test-1" allowBreak>
<p>This one should throw an error and wont be rendred</p>
</FeatureCase>
</FeatureSwitch>
</FeatureFlag>
const applicationKeys = {
'multivariate-test': { value: 'multivariate-test-2' },
'integration-test': { value: true }
};
<FeatureFlag flagKey="multivariate-test" appFlags={applicationKeys}>
<p>This non-component will get rendered</p>
<FeatureFlag flagKey="multivariate-test" appFlags={flags}>
<FeatureSwitch>
<FeatureCase condition="multivariate-test-1" allowBreak>
<p>Multivariate Test 1 Rendered</p>
</FeatureCase>
<FeatureCase condition="multivariate-test-2" allowBreak>
<p>This one will get rendered(Multivariate Test 2 Rendered)</p>
</FeatureCase>
<FeatureCase condition="multivariate-test-3" allowBreak>
<p>Multivariate Test 3 Rendered</p>
</FeatureCase>
<FeatureDefault allowBreak>
<p>This is the default content if no other cases are matched.</p>
</FeatureDefault>
</FeatureSwitch>
</FeatureFlag>
</FeatureFlag>
const appFlags = {
a: { value: 'a' },
b: { value: 'b' },
c: { value: 'c' },
d: { value: 'd' },
e: { value: 'e' }
};
const UsingHooks = () => {
const [count, setCount] = useState(65);
return (
<div>
<button onClick={() => setCount(count + 1)}>Add count</button>
<FeatureFlag
flagKey={String.fromCharCode(count).toLowerCase()}
appFlags={appFlags}
>
<FeatureSwitch>
<FeatureCase condition="a" allowBreak>
A is being rendered
</FeatureCase>
<FeatureCase condition="b" allowBreak>
B is being rendered
</FeatureCase>
<FeatureCase condition="c" allowBreak>
C is being rendered
</FeatureCase>
<FeatureCase condition="d" allowBreak>
D is being rendered
</FeatureCase>
<FeatureCase condition="e" allowBreak>
E is being rendered
</FeatureCase>
<FeatureDefault>No value matches, this is default</FeatureDefault>
</FeatureSwitch>
</FeatureFlag>
</div>
);
};
import launchDarklyClient from 'ld-react-components/API';
const endpoints = {
baseUrl: 'https://app.launchdarkly.com',
eventsUrl: 'https://events.launchdarkly.com',
streamUrl: 'https://stream.launchdarkly.com',
baseTimeout: 100
};
this._ldclientPromise = launchDarklyClient.initWithPromise(user, this._sdkKey, endpoints, 500);
getFeatureFlag(featureId, defaultValue = false) {
if (typeof window !== 'undefined') {
return new Promise((resolve, reject) => {
this._ldclientPromise
.then((client) => {
resolve(client.getFeatureFlag(featureId, defaultValue));
})
.catch((error) => {
reject(error);
});
});
}
}
yarn
yarn test
The module includes a demo demonstrating how to use the components
yarn
yarn dev
To see the demo go to http://localhost:8080
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
To add a contributor comment on Issue or Pull Request, asking @all-contributors to add a contributor:
Example: @all-contributors please add <username> for <contributions>
<contribution>:
See the Emoji Key (Contribution Types Reference) for a list of valid contribution types.
The bot will then create a Pull Request to add the contributor, then reply with the pull request details.
v1.0.61 (Wed Oct 30 2019)
FAQs
Semantic component helpers to support LaunchDarkly in your react app.
The npm package ld-react-components receives a total of 9 weekly downloads. As such, ld-react-components popularity was classified as not popular.
We found that ld-react-components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.