react-compose-components

A utility to flatten component pyramids in React.

Installation

npm i react-compose-components

Inspiration and Usage

If you have ever worked on a large-scale React application you are probably familiar with what I refer to as a "provider pyramid." Consider an application that uses react, redux, glamorous, react-i18next, react-instantsearch (Algolia), react-router, and perhaps some internal providers. You could have a root component that looks something like this:

// ...
export default () => (
  <Router history={history}>
    <ThemeProvider theme={theme}>
      <I18nextProvider i18n={i18n}>
        <ReduxProvider store={store}>
          <InternalProvider1>
            <InternalProvider2>
              <App />
            </InternalProvider2>
          </InternalProvider1>
        </ReduxProvider>
      </I18nextProvider>
    </ThemeProvider>
  </Router>
);

With this library, you can do the following:

import Compose from 'react-compose-components';
//..
export default () => (
  <Compose
    components={[
      [Router, { history }],
      [ThemeProvider, { theme }]
      [ReduxProvider, { store }]
      InternalProvider1,
      InternalProvider2,
      App,
    ]}
  />
);

This flattens the pyramid leading to better maintainability and cleaner VCS diffs.

The Compose component also accepts children:

import Compose from 'react-compose-components';
//..
export default () => (
  <Compose
    components={[
      [Router, { history }],
      [ThemeProvider, { theme }]
      [ReduxProvider, { store }]
      InternalProvider1,
      InternalProvider2,
    ]}
  >
    <App />
  </Compose>
);

API

This package has one default export, a component called Compose. Compose requires a single prop, components. components is an array of any of the following:

• A React component.
• A string (tag name such as 'div').
• A two-element array where the first element is either a React component or a string, and the second element is an object representing props to pass to the component.

TypeScript

This package is written in TypeScript and ships with built-in typings.

License

MIT