FLATED REACT

flated-react is a react libary that used to Flatten nested React components and remove React context hells

Build Status

Install

npm install --save @cute-me-on-repo/flated-react
pnpm install @cute-me-on-repo/flated-react
yarn add @cute-me-on-repo/flated-react

Usage

Giving an example react components/context hell:

// {...deps imports}

export default function ReactComponent({children}:{ children: ReactNode }){
    const session = getExampleServerSesion()

    return (
        <>
            <TooltipProvider>
                <AuthProvider session={session}>
                    <IntercomProvider>
                        <EmailVerificationProvider>
                            <ThemeProvider
                                attribute='class'
                                defaultTheme='dark'
                                enableSystem
                            >
                                {children}
                            </ThemeProvider>
                        </EmailVerificationProvider>
                    </IntercomProvider>
                </AuthProvider>
            </TooltipProvider>
        </>
    )
}

Update the code using flated-react:

Import flated-react

import FlatedReact from "@cute-me-on-repo/flated-react";

Update the hell

// {...deps imports}

export default function ReactComponent({children}:{ children: ReactNode }){
    const session = getExampleServerSesion()

    return (
        <FlatedReact.Wrap
          components={[
            FlatedReact.Load(TooltipProvider),
            FlatedReact.Load(AuthProvider, { session }),
            FlatedReact.Load(IntercomProvider),
            FlatedReact.Load(EmailVerificationProvider),
            FlatedReact.Load(ThemeProvider, {
              attribute: 'class',
              defaultTheme: 'dark',
              enableSystem: true,
            }),
          ]}
        >
          {children}
        </FlatedReact.Wrap>
    )
}

Notes

FlatedReact.Load is for component props type checking only, it is not neccessary in js, you can use the following code but we will not recommend it:

import FlatedReact from "@cute-me-on-repo/flated-react";
// {...deps imports}

export default function ReactComponent({children}:{ children: ReactNode }){
    const session = getExampleServerSesion()

    return (
        <FlatedReact.Wrap
          components={[
            TooltipProvider,
            [AuthProvider, { session })],
            IntercomProvider,
            EmailVerificationProvider,
            [ThemeProvider, {
              attribute: 'class',
              defaultTheme: 'dark',
              enableSystem: true,
            }],
          ]}
        >
          {children}
        </FlatedReact.Wrap>
    )
}