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.
@spotify-confidence/integration-react
Advanced tools
![](https://img.shields.io/badge/lifecycle-deprecated-a0c3d2.svg)
As of 2024-04-30, the experimental integration-react
library is officially deprecated. We encourage any users to transition to the official OpenFeature React SDK to ensure better support and newer features.
The integration-react
project was developed as a React wrapper for OpenFeature to provide initial support for integrating feature flags into React applications. Since then, the OpenFeature team has released an official React SDK, which offers a more robust, efficient, and feature-rich solution.
If you are currently using integration-react
, we recommend migrating to the official OpenFeature React SDK as soon as possible. This new SDK is actively maintained and supports the latest features and optimizations for feature flagging in React applications.
For detailed instructions on how to migrate and for more information about the benefits of the new SDK, please visit the official repository: 🔗 OpenFeature React SDK
This is a helper package to use OpenFeature
in React and ReactNative. It is not official OpenFeature and relies on behaviour from
the ConfidenceWebProvider specifically.
setProvider
makes the Provider launch a network request to initialize the flags. In cases of success the ProviderEvents.Ready
event will be emitted. In cases of failure of the network request, the ProviderEvent.Error
event will be emitted. The
ProviderEvents events will be emitted only when we are done with the network request, either a successful or a failed
network response. If the network response failed, default values will be returned on flag evaluation, if the network
request is successful we update the flags and then emit ProviderEvents.Ready
.
Notes:
setContext
while setProvider
is running, you can await setting the context first, or listen to the ProviderEvent.Ready
via a handler on OpenFeaure
.import React, { useEffect } from 'react';
import { createConfidenceWebProvider } from '@spotify-confidence/openfeature-web-provider';
import { OpenFeature, OpenFeatureAPI } from '@openfeature/web-sdk';
import { useStringValue } from '@spotify-confidence/integration-react';
const provider = createConfidenceWebProvider({
clientSecret: 'mysecret',
fetchImplementation: window.fetch.bind(window),
timeout: 1000,
});
const App = () => {
useEffect(() => {
OpenFeature.setContext({
targetingKey: 'myTargetingKey',
}).then(() => {
OpenFeature.setProvider(provider);
});
}, []);
return (
<React.Suspense fallback={<Loading />}>
<InnerComponent />
</React.Suspense>
);
};
function InnerComponent() {
const str = useStringValue('flag.some-string', 'default');
return <p>{str}</p>;
}
To use a custom client you can wrap your components in the OpenFeatureContextProvider
component.
import { OpenFeatureContextProvider } from '@spotify-confidence/integration-react';
const App = () => {
return (
<OpenFeatureContextProvider name={'my-client-name'}>
<React.Suspense fallback={<Loading />}>
<InnerComponent />
</React.Suspense>
</OpenFeatureContextProvider>
);
};
Notes:
React.Suspense
is used to show users a loading state whilst the flags are pending, to limit flickering experiences for users.import { useStringValue } from '@spotify-confidence/integration-react';
const str: string = useStringValue('flagKey', 'default');
import { useStringDetails } from '@spotify-confidence/integration-react';
import { ResolutionDetails } from '@openfeature/web-sdk';
const details: ResolutionDetails<string> = useStringDetails('flagKey', 'default');
import { useNumberValue } from '@spotify-confidence/integration-react';
const num: number = useNumberValue('flagKey', 0);
import { useNumberDetails } from '@spotify-confidence/integration-react';
import { ResolutionDetails } from '@openfeature/web-sdk';
const details: ResolutionDetails<number> = useNumberDetails('flagKey', 0);
import { useBooleanValue } from '@spotify-confidence/integration-react';
const bool: boolean = useBooleanValue('flagKey', false);
import { useBooleanDetails } from '@spotify-confidence/integration-react';
import { ResolutionDetails } from '@openfeature/web-sdk';
const details: ResolutionDetails<boolean> = useBooleanDetails('flagKey', false);
import { useObjectValue } from '@spotify-confidence/integration-react';
const struct: { val: string } = useObjectValue('flagKey', { val: 'default' });
import { useObjectDetails } from '@spotify-confidence/integration-react';
import { ResolutionDetails } from '@openfeature/web-sdk';
const details: ResolutionDetails<{ val: string }> = useObjectDetails('flagKey', { val: 'default' });
In Next13's server components using a dynamic paradigm OpenFeature sdk is recommended. This means setting up a Confidence server provider, see docs. Then you can use the async methods on an OpenFeature Client in your server component.
There are two options for usage of OpenFeature's Clients in Next's Client Components.
Option #1 is very simple to implement and will work for most cases.
Option #2 is more complex and requires the OpenFeature global API to be configured in the client bundle (under a
'use client'
directive), and the Confidence Web Provider, OpenFeature Context and OpenFeature's provider must be
set only in the browser. This will require making a component with a client boundary and checking if you're on the sever
either by using a useEffect Hook, or by checking the typeof window
.
In Next12 using a dynamic paradigm OpenFeature sdk is recommended. This means setting up a
Confidence server provider, see docs. Using this OpenFeature client in the
getServerSideProps
method to pass the retrieved flag values from the server to the client.
FAQs
![](https://img.shields.io/badge/lifecycle-deprecated-a0c3d2.svg)
We found that @spotify-confidence/integration-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 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.