npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@prefab-cloud/prefab-cloud-react

v0.4.1

Published

Feature Flags & Dynamic Configuration as a Service

Downloads

3,842

Readme

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: "[email protected]" },
    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:

| 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. |

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:

| 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

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