🤏 Compose Providers ─ Cleaner pattern for handling multiple context providers

ComposeProviders.component.tsx

// https://twitter.com/bidah/status/1563197138854588417

import reduceRight from 'lodash/reduceRight';

import type { ElementType, ReactNode } from 'react';

interface ComposeProvidersProps {
	components: Array<ElementType>;
	children: ReactNode;
}

export function ComposeProviders({ components, children }: ComposeProvidersProps): JSX.Element {
	return (
		<>
			{reduceRight(
				components,
				(memo, Component) => (
					<Component>{memo}</Component>
				),
				children,
			)}
		</>
	);
}