LayoutProvider (components/base/LayoutProvider.tsx)

Overview

Context provider component that manages layout-related state and dimensions across the application.

Features

• Context management
• Height tracking
• State sharing
• Type safety
• Custom hook
• Layout control

Dependencies

import React, { 
    createContext, 
    useState, 
    useContext, 
    ReactNode 
} from 'react'

Props

interface LayoutProviderProps {
    children: ReactNode;
}

type LayoutContextType = {
    navbarHeight: number;
    setNavbarHeight: React.Dispatch<React.SetStateAction<number>>;
    homeHeight: number;
    setHomeHeight: React.Dispatch<React.SetStateAction<number>>;
};

Implementation

State Management

const [navbarHeight, setNavbarHeight] = useState<number>(0);
const [homeHeight, setHomeHeight] = useState<number>(0);

Methods

export const useLayoutContext = () => {
    const context = useContext(LayoutContext);
    if (!context) {
        throw new Error('useLayoutContext must be used within a LayoutProvider');
    }
    return context;
};

Unique Functionality

• Context creation and validation
• Height state management
• Error boundary handling
• Type-safe context usage

HTML Structure

<LayoutContext.Provider 
    value={{ 
        navbarHeight, 
        setNavbarHeight, 
        homeHeight, 
        setHomeHeight 
    }}
>
    {children}
</LayoutContext.Provider>

API Integration

No direct API integration.

Components Used

No additional components used.

Notes

• Implements React Context pattern
• Provides type-safe context
• Includes error handling
• Manages layout dimensions
• Supports dynamic updates