@ff00ff/boolean-react
v0.7.0
Published
Boolean's react client library to make it easy to start using feature flags
Downloads
13
Readme
🎚 Boolean
Feature management for modern devops teams by Boolean.
npm i @ff00ff/boolean-react
Features
- Percentage-based rollout
- User targeting & segmentation
- Turn off features instantly
- Audit log
- SSO / SAML
⚠️ Create an account at Boolean. We have different plans available for different teams including a free trial.
Quick start
Use the useBoolean(..)
hook to easily get the value of your feature flag.
function MyComponent() {
const { isEnabled } = useBoolean(`my-feature`);
if (isEnabled) {
// Return you enhanced feature.
}
// Return your regular feature.
}
And add the BooleanProvider
in the root of your component tree (so the hooks receive the data via the new context api).
⚠️ Copy the api key from the Boolean site under the API Keys menu item.
<BooleanProvider apiKey={process.env.BOOLEAN_API_KEY}>
{/* Your component tree here */}
</BooleanProvider>
Important
- We use the WebSocket api. Configure a polyfill if you're targeting older browsers. https://www.caniuse.com/#search=websocket
- If WebSockets are not available, or the connection cannot be established, we use the standard
fetch
API to make networks requests. It's not supported in all browsers yet. Use a polyfill if you wish to support these browsers (and you're not polyfilling this yet). If you do not configure a polyfill, the library will not fall back to http requests. - In addition, this library also uses the standard
AbortController
which may also require a polyfill. - The client optionally caches data using
localforage
. If possible, unlike plainlocalStorage
,localforage
does async storage to avoid blocking the main render loop. Iflocalforage
is not available the client does not cache data.
📄 Seeing logs? Don't worry. The client library logs errors and warnings only when
NODE_ENV
is not set toproduction
.
Subjects & Advanced Targetting
You can optionally pass a subjectId
and/or subjectData
to the useBoolean(..)
hook. These properties are used to determine which feature flags are enabled for the current subject by looking at the configured percentage on the different segments.
⚠️ A
subjectId
may be the currently signed in user id. But it could also be a project's id or group of user ids. Two users chatting with eachother or colleague's working in the same project probably want to see the same features.
function MyComponent({ user }) {
const { isEnabled } = useBoolean(`my-feature`, user.id, {
email: user.email,
});
if (isEnabled) {
// Return you enhanced feature.
}
// Return your regular feature.
}
⚠️ If you configured a percentage on your feature flag, you must pass in a
subjectId
or the feature flag will be disabled by default. You can always generate and store a random subjectId for anonymous users.
In Boolean's admin panel you can manage your segments. For example: create an Internal Users
segment with a rule email ENDS_WITH @useboolean.com
. When your feature flag includes this segment it will only be enabled to internal users.
Pass more properties so you have more targetting options in your segments: days since acquisition; time zone; network connection; profile data; etc.
The segments and their rules are evaluated locally: so Boolean does not consume your users' data. This is by design to protect the privacy of your users.
Loading
When BooleanProvider
mounts it immediately loads Boolean's data. But it's possible to call useBoolean()
before any data is loaded. By default, features will be turned off if no data has been loaded yet. As soon as data will be available the feature will be flipped accordingly.
To change this behaviour you can check the isLoading
state of Boolean. For returning visitors, it's advised to cache previous data so it's available immediately. To enable caching, simply install the localforage
module.
Below an example to check the loading state of my-feature
and enable the feature if data is still loading.
function MyComponent() {
const { isLoading, isEnabled } = useBoolean(`my-feature`);
if (isLoading || isEnabled) {
// Return you enhanced feature.
}
// Return your regular feature.
}
📨 If you have any feedback or just want to say hi you can send us a ping. Over & out!