Skip to content

Instantly share code, notes, and snippets.

@thebinaryfelix

thebinaryfelix/ProviderComposer.tsx

Last active August 23, 2024 14:40
Show Gist options
  • Save thebinaryfelix/6f85a9ec7cad11accb71f22d8e2edfec to your computer and use it in GitHub Desktop.
Save thebinaryfelix/6f85a9ec7cad11accb71f22d8e2edfec to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. thebinaryfelix revised this gist Oct 30, 2022. 1 changed file with 0 additions and 24 deletions.
    24 changes: 0 additions & 24 deletions ProviderComposer.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -31,27 +31,3 @@ export const ProviderComposer = (props: IProviderComposerProps) => {

    return <ComposedProviders>{props.children}</ComposedProviders>
    }

    /*
    How to use
    <ProviderComposer
    with={[
    FirstProvider,
    SecondProvider,
    ThirdProvider
    ]}
    >
    {children}
    </ProviderComposer>
    Instead of nesting providers
    <FirstProvider>
    <SecondProvider>
    <ThirdProvider>
    {children}
    </ThirdProvider>
    </SecondProvider>
    </FirstProvider>
    */
  2. thebinaryfelix revised this gist Oct 30, 2022. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions ProviderComposer.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -46,6 +46,7 @@ How to use
    </ProviderComposer>
    Instead of nesting providers
    <FirstProvider>
    <SecondProvider>
    <ThirdProvider>
  3. thebinaryfelix revised this gist Oct 30, 2022. 1 changed file with 10 additions and 1 deletion.
    11 changes: 10 additions & 1 deletion ProviderComposer.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    export interface IProviderComposerProps extends React.PropsWithChildren {
    /**
    * Lista de providers
    * Providers list
    * */
    with: React.FC<React.PropsWithChildren>[]
    }
    @@ -44,4 +44,13 @@ How to use
    >
    {children}
    </ProviderComposer>
    Instead of nesting providers
    <FirstProvider>
    <SecondProvider>
    <ThirdProvider>
    {children}
    </ThirdProvider>
    </SecondProvider>
    </FirstProvider>
    */
  4. thebinaryfelix revised this gist Oct 30, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ProviderComposer.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -42,6 +42,6 @@ How to use
    ThirdProvider
    ]}
    >
    {/* Here be dragons... 🐉 */}
    {children}
    </ProviderComposer>
    */
  5. thebinaryfelix created this gist Oct 30, 2022.
    47 changes: 47 additions & 0 deletions ProviderComposer.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    export interface IProviderComposerProps extends React.PropsWithChildren {
    /**
    * Lista de providers
    * */
    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>
    }

    /*
    How to use
    <ProviderComposer
    with={[
    FirstProvider,
    SecondProvider,
    ThirdProvider
    ]}
    >
    {/* Here be dragons... 🐉 */}
    </ProviderComposer>
    */