Skip to main content

React Client

Getting Started With the React Client

Use your favorite package manager to install @prefab-cloud/prefab-cloud-react npm | github

npm install @prefab-cloud/prefab-cloud-react or yarn add @prefab-cloud/prefab-cloud-react

TypeScript types are included with the package.

Usage in your app

This client includes a <PrefabProvider> and usePrefab hook.

First, wrap your component tree in the PrefabProvider, e.g.

import PrefabProvider from '@prefab-cloud/prefab-cloud-react';

const WrappedApp = () => {
const lookupKey = "user-12345";
const identityAttributes = {email: "", plan: "advanced"};

const onError = (reason) => {

return (
<App />
  • lookupKey should be a unique key for the current visitor/user
  • identityAttributes are attributes that you can use to segment your users

Now use the usePrefab hook to fetch flags and config values

const Logo = () => {
const { isEnabled } = usePrefab();

if (isEnabled("new-logo")) {
return (
<img src={newLogo} className="App-logo" alt="logo" />

return (
<img src={logo} className="App-logo" alt="logo" />

usePrefab properties

const { isEnabled, get, loading, lookupKey, identityAttributes } = usePrefab();

Here's an explanation of each property

isEnabledisEnabled("new-logo")returns a boolean (default false) if a feature is enabled based on the currently identified user
getget('retry-count')returns the value of a flag or config
loadingif (loading) { ... }a boolean indicating whether prefab content is being loaded
lookupKeyN/Athis is the key you passed when setting up the provider
identityAttributesN/Athis is the identity attributes object you passed when setting up the provider

While loading is true, isEnabled will return false and get will return undefined.


Wrap the component under test in a PrefabTestProvider and provide a config object to set up your test state.

e.g. if you wanted to test the following trivial component

function MyComponent() {
const { get, isEnabled, loading } = usePrefab();
const greeting = get('greeting') || 'Greetings';

if (loading) {
return <div>Loading...</div>;

return (
<h1 role="alert">{greeting}</h1>
{ isEnabled('secretFeature') && <button type="submit" title="secret-feature">Secret feature</button> }

You could do the following in jest/rtl

import { PrefabTestProvider } from './index';

const renderInTestProvider = (config: {[key: string]: any}) => {
<PrefabTestProvider config={config}>
<MyComponent />

it('shows a custom greeting', async () => {
renderInTestProvider({ greeting: 'Hello' });

const alert = screen.queryByRole('alert');

it('shows the secret feature when it is enabled', async () => {
renderInTestProvider({ secretFeature: true });

const secretFeature = screen.queryByTitle('secret-feature');