react-nest

If you've ever written a complex React application, you might be familiar with code that looks like this:

function App() {
  return (
    <AsyncComponentProvider asyncContext={asyncContext}>
      <JobProvider jobContext={jobContext}>
        <StaticRouter location={request.url}>
          <Provider store={store}>
            <IntlProvider>
              <App />
            </IntlProvider>
          </Provider>
        </StaticRouter>
      </JobProvider>
    </AsyncComponentProvider>
  );
}

I wrote a micro-library that allows you to clean deeply nested jsx elements and write the same like this:

import Nest from 'react-nest';

function App() {
  return (
    <Nest>
      <AsyncComponentProvider asyncContext={asyncContext} />
      <JobProvider jobContext={jobContext} />
      <StaticRouter location={request.url} />
      <Provider store={store} />
      <IntlProvider />
      <App />
    </Nest>
  );
}

You can give it a try, checkout react-nest