@prefab-cloud/prefab-cloud-react v0.2.6

prefab-cloud-react

A React provider and hook for Prefab

Installation

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

Configure the Provider

Wrap your component tree in the PrefabProvider, e.g.

import { PrefabProvider } from "@prefab-cloud/prefab-cloud-react";

const WrappedApp = () => {
  const context = {
    user: { email: "jeffrey@example.com" },
    subscription: { plan: "advanced" },
  };

  const onError = (error) => {
    console.error(error);
  };

  return (
    <PrefabProvider apiKey={"YOUR_API_KEY"} contextAttributes={context} onError={onError}>
      <App />
    </PrefabProvider>
  );
};

Here's an explanation of each provider prop:

Usage in Your Components

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 exposes the following:

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

Here's an explanation of each property:

Usage in your test suite

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 (
    <div>
      <h1 role="alert">{greeting}</h1>
      {isEnabled("secretFeature") && (
        <button type="submit" title="secret-feature">
          Secret feature
        </button>
      )}
    </div>
  );
}

You could do the following in jest/rtl

import { PrefabTestProvider } from '@prefab-cloud/prefab-cloud-react';

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

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

  const alert = screen.queryByRole('alert');
  expect(alert).toHaveTextContent('Hello');
});

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

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

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated. For detailed contributing guidelines, please see CONTRIBUTING.md