How to use

Instead of nesting providers like this:

<FirstProvider> <SecondProvider> <ThirdProvider> {children} </ThirdProvider> </SecondProvider> </FirstProvider>

Use the ProviderComposer to make it cleaner:

<ProviderComposer with={[ FirstProvider, SecondProvider, ThirdProvider ]} > {children} </ProviderComposer>

Nice, but how can I put some providers that has props ?
<MantineProvider theme={{ primaryColor: 'blue', fontFamily: 'Inter VP' }} withGlobalStyles withNormalizeCSS withCSSVariables > ?

@carlosrziegler you can create a component such as:

const MyProvider = ({ children }) => ( <MantineProvider theme={{ primaryColor: 'blue', fontFamily: 'Inter VP' }} withGlobalStyles withNormalizeCSS withCSSVariables > {children} </MantineProvider>)

And then use that in the ProviderComposer.

<ProviderComposer with={[MyProvider]} />

As long as your component receives children and pass it along, you can even include complex logic inside the providers.

@thebinaryfelix do you stack them in order of dependency to each?

@t1amat9409 yes, because the order matters. In the example above, the FirstProvider should be placed in the first position of the array.

@thebinaryfelix nice! this is awesome!!

🚀🚀🚀

how to solve ESLint Component definition is missing display name?

I changed on named functions syntax for now

const providerReducer = ( ParentProvider: React.FC<React.PropsWithChildren>, ChildProvider: React.FC<React.PropsWithChildren>, ) => function providerReducerInner({ children }: React.PropsWithChildren) { return ( <ParentProvider> <ChildProvider>{children}</ChildProvider> </ParentProvider> ); };