‚̧Noteworthy Programming Masterpiece
    Have ideas to improve npm?Join in the discussion! ¬Ľ

    react-compose-components
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    react-compose-components

    Dependency Status devDependency Status Greenkeeper badge Build Status Npm Version License Commitizen friendly Badges

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

    Install

    npm i react-compose-components

    DownloadsWeekly Downloads

    220

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    17.8 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar