configbee-react v0.0.2
ConfigBee React SDK
The ConfigBee React SDK allows you to easily integrate ConfigBee into your React-based projects to manage configurations and feature flags dynamically.
Installation
You can install the configbee-react
package via npm or yarn:
npm install configbee-react
# or
yarn add configbee-react
Usage
ConfigBeeProvider and Layout Setup
Now, create a dedicated file for your ConfigBee provider component. Let's name it configbee-provider.tsx. In this file, import the necessary modules and define the ConfigbeeProvider component:
// src/providers/configbee-provider.tsx
"use client"
import React from 'react';
import { CbWrapper } from 'configbee-react';
const ConfigbeeProvider = ({ children }:{
children: React.ReactNode
}) => {
return (
<CbWrapper
accountId="your_account_id"
projectId="your_project_id"
environmentId="your_environment_id"
>
{children}
</CbWrapper>
);
};
export default ConfigbeeProvider;
Replace "your_account_id"
, "your_project_id"
, and "your_environment_id"
with your actual ConfigBee account, project, and environment IDs.
With the ConfigbeeProvider component created, it's time to integrate it into your root component or layout file. For example, if you are using a layout component, modify it like this:
// src/app/layout.tsx
import React from 'react';
import ConfigbeeProvider from '../providers/configbee-provider';
function Layout({ children }:{
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<ConfigbeeProvider>
{children}
</ConfigbeeProvider>
</body>
</html>
);
}
export default Layout;
Using ConfigBee Hooks
Use the provided hooks to access ConfigBee configurations and feature flags within your components:
import React from 'react';
import { useCbStatus, useCbFlags } from 'configbee-react';
const MyComponent = () => {
const cbStatus = useCbStatus();
const { featureEnabled } = useCbFlags() as { featureEnabled?: boolean };
return (
<div>
ConfigBee Status: {cbStatus}
<br />
Feature Flag: {featureEnabled ? 'Enabled' : 'Disabled'}
</div>
);
};
export default MyComponent;
Available Hooks
useCbStatus()
: Retrieves the status of the ConfigBee configuration for the current environment.useCbTargetingStatus()
: Retrieves the targeting status of the ConfigBee configuration for the current environment.useCbFlags()
: Fetches feature flags from ConfigBee.useCbNumbers()
: Fetches numerical values from ConfigBee.useCbJsons()
: Fetches JSON configurations from ConfigBee.useCbTexts()
: Fetches text-based configurations from ConfigBee.useCbOperations()
: Retrieves Configbee operation functions.
Operation functions
setTargetProperties(props)
: Set/update target propertiesunsetTargetProperties(props)
: Clear target properties
Example usage in NextJs page
// src/app/test/page.tsx
import React from 'react';
import {
useCbStatus,
useCbFlags,
useCbNumbers,
useCbJsons,
useCbTexts,
} from 'configbee-react';
const TestPage = () => {
const cbStatus = useCbStatus();
const { isPublished } = useCbFlags() as { isPublished?: boolean };
const { followersCount } = useCbNumbers() as { followersCount?: number };
const { displayName } = useCbTexts() as { displayName?: string };
const { forceUpdate } = useCbJsons() as {
forceUpdate?: { required_version: string; is_force_update: boolean };
};
if (cbStatus !== "ACTIVE") {
return "Loading...";
}
return (
<>
page component
{cbStatus}
<br />
{isPublished === true ? <>it is published</> : <>it is not yet published</>}
<br />
Display Name: {displayName}
<br />
Followers Count: {followersCount}
<br />
Force Update:
<br />
---> required_version: {forceUpdate?.required_version}
<br />
---> is_force_update: {forceUpdate?.is_force_update ? "Yes" : "No"}
</>
);
};
export default TestPage;
Targeting
Configbee allows you to define target properties to tailor configurations based on specific criteria. You can set target properties either by using setTargetProperties, unsetTargetProperties from useCbOperations hook or by passing targetProperties to CbWrapper component.
By using operation function from useCbOperations
import React from 'react';
import { useCbStatus, useCbTargetingStatus, useCbOperations } from 'configbee-react';
const MyComponent = () => {
const cbStatus = useCbStatus();
const cbTargetingStatus = useCbTargetingStatus();
const cbOps = useCbOperations()
const userLogin = ({userId,userName}) => {
if(userId){
cbOps.setTargetProperties({"userId":userId, "userName": userName})
}
else{
cbOps.unsetTargetProperties()
}
}
return (
.....
);
};
export default MyComponent;
By passing targetProperties to CbWrapper component
const ConfigbeeProvider = ({ children }:{
children: React.ReactNode
}) => {
const userId = myStorage.userId
const userName = myStorage.userName
return (
<CbWrapper
accountId="your_account_id"
projectId="your_project_id"
environmentId="your_environment_id"
targetProperties={{"userId":userId, "userName": userName}}
>
{children}
</CbWrapper>
);
};
Note: Target properties will be maintained between multiple page loads until the next change or setTargetProperties/unsetTargetProperties call.
Resources
5 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago