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

$3

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

``javascript
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 (



);
};
`

Here's an explanation of each provider prop:

| property | required | type | purpose |
| ------------------- | -------- | ------------------- | ----------------------------------------------------------------------------- |
| apiKey | yes | string | your Prefab API key |
| onError | no | (error) => void | callback invoked if prefab fails to initialize |
| contextAttributes | no | ContextAttributes | this is the context attributes object you passed when setting up the provider |
| endpoints | no | string[] | CDN endpoints to load configuration from (defaults to 2 prefab-based CDNs) |
| timeout | no | number | initialization timeout (defaults to 10 seconds) |
| pollInterval | no | number | configures prefab to poll for updates every pollInterval ms. |

$3

Use the usePrefab hook to fetch flags and config values:

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

if (isEnabled("new-logo")) {
return ;
}

return ;
};
`

usePrefab exposes the following:

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

Here's an explanation of each property:

| property | example | purpose |
| ------------------- | ----------------------- | ---------------------------------------------------------------------------------------- |
| isEnabled | isEnabled("new-logo") | returns a boolean (default false) if a feature is enabled based on the current context |
| get | get('retry-count') | returns the value of a flag or config |
| loading | if (loading) { ... } | a boolean indicating whether prefab content is being loaded |
| contextAttributes | N/A | this is the context attributes object you passed when setting up the provider |
| prefab | N/A | the underlying JavaScript prefab instance |
| keys | N/A | an array of all the flag and config names in the current configuration |

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

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

if (loading) {
return

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

const renderInTestProvider = (config: {[key: string]: any}) => {
render(


,
);
};

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

[jest]: https://jestjs.io/
[rtl]: https://testing-library.com/docs/react-testing-library/intro/
[Prefab]: https://www.prefab.cloud/

Release Scripts

This package includes scripts to simplify the release process:

$3

To publish a new standard release (patch version):

`bash
./publish-release.sh
`

This script:

- Runs tests
- Builds the package
- Bumps the patch version
- Publishes to npm with the latest tag

$3

To publish a pre-release version:

- Manually bump the version in package.json (e.g. bump the patch version and add -pre1)
- npm install to update the lockfile

`bash
./publish-prerelease.sh
`

This script:

- Runs tests
- Builds the package
- Publishes to npm with the pre tag

To install the pre-release version:

`bash
npm install @prefab-cloud/prefab-cloud-react@pre
``