Miss any of our Open RFC calls?Watch the recordings here! »

react-array-to-tree

1.0.1 • Public • Published

react-array-to-tree

Make a nested tree of React components out of a flat array

Installation

npm i react-array-to-tree or yarn add react-array-to-tree

Usage

If you have a React application with multiple contexts you might end up with a deep nested tree of context providers, something like this:

const AppWithProviders = () => (
  <ThemeContext.Provider param1={value1}>
    <UserContext.Provider>
      <SomeOtherContext.Provider param2={value2} param3={value3}>
        <YetAnotherContext.Provider>
          <OneMoreContext.Provider>
            <AndOneMoreContext.Provider>
              <AndSoOnContext.Provider>
                <AndSoForthContext.Provider>
                  <App/>
                <AndSoForthContext.Provider>
              </AndSoOnContext.Provider>
            </AndOneMoreContext.Provider>
          </OneMoreContext.Provider>
        </YetAnotherContext.Provider>
      </YetAnotherContext.Provider>
    </UserContext.Provider>
  </ThemeContext.Provider>
)

To make the structure more flat you can use this library:

import ReactArrayToTree from 'react-array-to-tree';

const Providers = ReactArrayToTree([
  [ThemeContext.Provider, {param1: value1}],
  [UserContext.Provider],
  [SomeOtherContext.Provider, {param2: value2, param3: value3}],
  [YetAnotherContext.Provider],
  [OneMoreContext.Provider],
  [AndOneMoreContext.Provider],
  [AndSoOnContext.Provider],
  [AndSoForthContext.Provider],
]);

const AppWithProviders = () => (
  <Providers>
    <App/>
  </Providers>
);

Keywords

none

Install

npm i react-array-to-tree

DownloadsWeekly Downloads

3

Version

1.0.1

License

MIT

Unpacked Size

5.29 kB

Total Files

5

Last publish

Collaborators

  • avatar