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}>
<App />

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 (
<AsyncComponentProvider asyncContext={asyncContext} />
<JobProvider jobContext={jobContext} />
<StaticRouter location={request.url} />
<Provider store={store} />
<IntlProvider />
<App />

You can give it a try, checkout react-nest