React Pipeline Component

A 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 // 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

]} />
}
`

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

} />
} />

``