-
-
Save nabeel-shakeel/c0b45227cd82c54f79a8a4f9663d371d to your computer and use it in GitHub Desktop.
Component for composing providers in React v18 with Typescript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export interface IProviderComposerProps extends React.PropsWithChildren { | |
/** | |
* Providers list | |
* */ | |
with: React.FC<React.PropsWithChildren>[] | |
} | |
const ComposerFragment: React.FC<React.PropsWithChildren> = ({ | |
children, | |
}): JSX.Element => <>{children}</> | |
const providerReducer = | |
( | |
ParentProvider: React.FC<React.PropsWithChildren>, | |
ChildProvider: React.FC<React.PropsWithChildren>, | |
) => | |
({ children }: React.PropsWithChildren) => | |
( | |
<ParentProvider> | |
<ChildProvider>{children}</ChildProvider> | |
</ParentProvider> | |
) | |
/** | |
* @Component | |
* @name ProviderComposer | |
* @description Component that receives a list of providers and composes them to a single component. | |
*/ | |
export const ProviderComposer = (props: IProviderComposerProps) => { | |
const ComposedProviders = props.with.reduce(providerReducer, ComposerFragment) | |
return <ComposedProviders>{props.children}</ComposedProviders> | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment