@webframe/react-providers

This package provides a utility component for react along with a helper function to wrap a component tree with providers in a typesafe way.

Installation

npm install @webframe/react-providers // or
yarn add @webframe/react-providers

Basic Example

import React from 'react';
import Providers, { createProvider } from '@webframe/react-providers';

const App = () => {
  return (
    <Providers
      providers={[
        createProvider(Provider1),
        createProvider(Provider2, { prop1: 'value1' }),
      ]}
    >
      <Component />
    </Providers>
  );
};

Usage

The <Providers /> component accepts a single prop providers which is an array of objects containing the Component and the props. See below

const providers = [
  { Component: Provider1, props: {} },
  { Component: Provider2, props: { prop1: 'value1' } },
];

Use the createProvider helper to create the object to pass to the <Providers /> component. See below

const providers = [
  createProvider(Provider1),
  createProvider(Provider2, { prop1: 'value1' }),
];

The createProvider helper returns an object of the correct structure for the <Providers /> component. It also typechecks the provider component and the props passed to it.

You can then pass the providers array to the <Providers /> component to wrap the component tree with the providers.

<Providers providers={providers}>
  <Component />
</Providers>

Components are wrapped in order with the first in the list being the outermost provider.

Why?

Often when working with react, you need to wrap a component tree with providers. This can be cumbersome and error-prone as the provider components require the children prop to be populated. Developers will often use comments to ignore the errors or live with heavy indentation. This package provides a simple way to wrap a component tree with providers in a typesafe way without the need for workarounds.