Context Provider Compose

[EricRovell]

I use Context API quite a lot within my application and decided to write an utility to compose providers where there are too many of them.

My solution looks like this:

import type { ParentComponent, ParentProps} from "solid-js";

const ProviderCompose = (props: Props) => (
	<>
		{props.components.reduceRight((acc, Component) => <Component>{acc}</Component>, props.children)}
	</>
);

And the usage like this:

export const App = () => {

	return (
		<>
			<ProviderCompose components={[ MetaProvider, SettingsProvider, TranslationProvider ]}>
				<Routes />
			</ProviderCompose>
		</>
	);
}

But the problem is, it does not work. The error appears within useContext hook: Error: useSettings must be used with a Settings.Provider. This seems strange, am I doing something wrong by passing the children? Thanks for help!

[atk]

There's the @solid-primitives/context package that makes working with context easier.

[EricRovell]

There's the @solid-primitives/context package that makes working with context easier.

I see, there is MultiProvider utility. I will look how it is implemented, thanks!