A solution for react provider hell (provider version of callback hell)
npm install react-pipeline-componentA component to declare really long nested components without going to component hell.
#### How to use
This code:
``tsx
import {SomethingProvider, Something} from './something';
import {OtherthingProvider, Otherthing} from './otherthing';
import {ComplexProvider, Complex} from './complex';
import {MyLayout} from './layout';
function MyApp() {
const mySomething = new Something()
const myOtherthing = new Otherthing()
const myFirstComplex = new Complex()
const mySecondComplex = new Complex()
return
{/ Ouch, too deep! /}
}
`
Can be transformed into:
`tsx
import {Pipeline, Pipe} from "react-pipeline-component";
import {SomethingProvider, Something} from './something';
import {OtherthingProvider, Otherthing} from './otherthing';
import {ComplexProvider, Complex} from './complex';
import {MyLayout} from './layout';
function MyApp() {
const mySomething = new Something()
const myOtherthing = new Otherthing()
const myFirstComplex = new Complex()
const mySecondComplex = new Complex()
return
// or you could nest some and keep the rest oneliners
{/ Pipe holds the next component in the list /}
// now your main component can be written with less indentation
]} />
}
`
Alternatively, you can write it this way:
`tsx
import {Pipeline, Pipe, pipe} from "react-pipeline-component";
import {SomethingProvider, Something} from './something';
import {OtherthingProvider, Otherthing} from './otherthing';
import {ComplexProvider, Complex} from './complex';
import {MyLayout} from './layout';
function MyApp() {
const mySomething = new Something()
const myOtherthing = new Otherthing()
const myFirstComplex = new Complex()
const mySecondComplex = new Complex()
return
{/ You can write your providers in one line for each provider /}
{/ or you could nest some and keep the rest oneliners /}
{/ Pipe holds the next component in the list /}
{/ now your main component can be written with less indentation /}
}
`
As you can see, the constant pipe is alternative to writing
`tsx`
`tsx`
Also, passing your components as an array is alternative to passing them as children
`tsx`
]} />
`tsx``