# react-children-wrapper

> Resolves React Provider Hell by wrapping children one into another

Latest version **0.9.0** (published 2023-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-children-wrapper
pnpm add react-children-wrapper
yarn add react-children-wrapper
bun add react-children-wrapper
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.0 |
| Published | 2023-05-29 |
| First published | 2023-05-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Marko Ivanovic |
| Maintainers | kormang |
| Keywords | react, typescript, provider hell |

## Links

- npm: https://www.npmjs.com/package/react-children-wrapper
- Repository: https://github.com/kormang/react-children-wrapper
- Homepage: https://github.com/kormang/react-children-wrapper#readme
- Issues: https://github.com/kormang/react-children-wrapper/issues
- npm.io page: https://npm.io/package/react-children-wrapper

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.9.0 (latest) — 2023-05-29

## README

# react-children-wrapper

Resolve React Provider Hell

Turn this code:

```(JavaScript)
<AppContext.AppProvider
  value={{
  ...this.setStateData(AppContext.CONTEXT_ID, AppContext.stateData),
    userAgent: pageProps.userAgent
  }}
>
  <JssProvider
    registry={this.pageContext.sheetsRegistry}
    generateClassName={this.pageContext.generateClassName}
  >
    <SocketProvider>
      <MuiThemeProvider theme={this.pageContext.theme}>
        <ThemeProvider theme={theme}>
          <GeolocationProvider>
            <ShopProvider>
              <UserProvider user={pageProps.user}>
                <Component pageContext={this.pageContext} {...pageProps} />
              </UserProvider>
            </ShopProvider>
          </GeolocationProvider>
        </ThemeProvider>
      </MuiThemeProvider>
    </SocketProvider>
  </JssProvider>
</AppContext.AppProvider>
```

into this:

```(JavaScript)
<ChildrenWrapper>
  <CPAppContext.AppProvider
    value={{
      ...this.setStateData(CPAppContext.CONTEXT_ID, CPAppContext.stateData),
      userAgent: pageProps.userAgent
    }}
  />
  <JssProvider
    registry={this.pageContext.sheetsRegistry}
    generateClassName={this.pageContext.generateClassName}
  >
    .
  </JssProvider>
  <SocketProvider />
  <MuiThemeProvider theme={this.pageContext.theme}>.<MuiThemeProvider>
  <ThemeProvider theme={theme}>.</ThemeProvider>
  <GeolocationProvider />
  <CartProvider />
  <UserProvider user={pageProps.user}>
  <Component pageContext={this.pageContext} {...pageProps} />
</ChildrenWrapper>
```

*For privider that require some children you can provide simple dot (.) as child, it will be overriden by next sibiling anyway.*

`ChildrenWrapper` turns converts flat hierarchy as if siblings had actually parent-child relations ship. Real children are disacred, except for last sibling, it retains its children. See the source code, it is simple.


# How to use it?

Copy the code from `src/index.ts` or install the package with `yarn add react-children-wrapper` or `npm install react-children-wrapper`.

Import the component.

```(JavaScript)
import ChildrenWrapper from 'react-children-wrapper'
```

Transform your code like this:
This...

```(JavaScript)
  <ChakraProvider>
    <Provider store={store}>
      <App />
    </Provider>
  </ChakraProvider>
```

...into this

```(JavaScript)
    <ChildrenWrapper>
      <ChakraProvider />
      <Provider store={store}>.</Provider>
      <App />
    </ChildrenWrapper>
```

---
_Source: https://npm.io/package/react-children-wrapper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._