### Install @fullstackhouse/react-compose

Source: https://github.com/fullstackhouse/react-compose/blob/main/README.md

Instructions for installing the @fullstackhouse/react-compose package using npm.

```bash
npm install @fullstackhouse/react-compose
```

--------------------------------

### Compose React Providers - Basic Example

Source: https://context7.com/fullstackhouse/react-compose/llms.txt

Demonstrates basic composition of multiple React context providers and a content component using the `compose` function. The order in the array determines the nesting hierarchy. Requires React and the `@fullstackhouse/react-compose` library.

```tsx
import React, { createContext, useContext, PropsWithChildren } from 'react';
import { compose } from '@fullstackhouse/react-compose';

// Define contexts
const ThemeContext = createContext<'light' | 'dark'>('light');
const AuthContext = createContext<{ user: string | null }>({ user: null });

// Create providers
function ThemeProvider({ children }: PropsWithChildren) {
  return (
    <ThemeContext.Provider value="dark">
      {children}
    </ThemeContext.Provider>
  );
}

function AuthProvider({ children }: PropsWithChildren) {
  return (
    <AuthContext.Provider value={{ user: 'john@example.com' }}>
      {children}
    </AuthContext.Provider>
  );
}

// Content component
function Dashboard() {
  const theme = useContext(ThemeContext);
  const auth = useContext(AuthContext);
  return (
    <div>
      <h1>Dashboard</h1>
      <p>Theme: {theme}</p>
      <p>User: {auth.user}</p>
    </div>
  );
}

// Compose all providers and content
const App = compose([
  ThemeProvider,
  AuthProvider,
  Dashboard,
]);

// Renders:
// <ThemeProvider>
//   <AuthProvider>
//     <Dashboard />
//   </AuthProvider>
// </ThemeProvider>

export default App;
```

--------------------------------

### React Compose Function Example

Source: https://github.com/fullstackhouse/react-compose/blob/main/README.md

Illustrates the internal rendering logic of the `compose` function, showing how components are nested from outermost to innermost.

```tsx
compose([A, B, C])
// Renders as:
<A>
  <B>
    <C />
  </B>
</A>
```

--------------------------------

### React Provider Hell Example

Source: https://github.com/fullstackhouse/react-compose/blob/main/README.md

Demonstrates the problem of deeply nested JSX when using multiple React providers, leading to unreadable and unmaintainable code.

```tsx
function App() {
  return (
    <ThemeProvider>
      <AuthProvider>
        <I18nProvider>
          <RouterProvider>
            <QueryProvider>
              <AppContent />
            </QueryProvider>
          </RouterProvider>
        </I18nProvider>
      </AuthProvider>
    </ThemeProvider>
  );
}
```

--------------------------------

### Compose Multiple React Providers with @fullstackhouse/react-compose

Source: https://context7.com/fullstackhouse/react-compose/llms.txt

This example shows how to use the `compose` function from '@fullstackhouse/react-compose' to combine multiple React context providers and a main application content component into a single, composable component. It defines contexts for theme, internationalization, authentication, routing, and data fetching, and then implements providers for each. The `compose` function takes an array where each element is either a provider component or a tuple of a provider component and its props, followed by the main application content component. This approach avoids deeply nested JSX, leading to a cleaner application structure. It requires React and the '@fullstackhouse/react-compose' library.

```tsx
import React, { createContext, useContext, PropsWithChildren } from 'react';
import { compose } from '@fullstackhouse/react-compose';

// Define all contexts
const ThemeContext = createContext<'light' | 'dark'>('light');
const I18nContext = createContext<{ t: (key: string) => string }>({
  t: (key) => key,
});
const AuthContext = createContext<{ user: string | null; logout: () => void }>({
  user: null,
  logout: () => {},
});
const RouterContext = createContext<{ route: string }>({ route: '/' });
const QueryContext = createContext<{ cache: Map<string, any> }>({
  cache: new Map(),
});

// Provider implementations
interface ThemeProviderProps {
  theme: 'light' | 'dark';
}

function ThemeProvider({ children, theme }: PropsWithChildren<ThemeProviderProps>) {
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

interface I18nProviderProps {
  locale: string;
}

function I18nProvider({ children, locale }: PropsWithChildren<I18nProviderProps>) {
  const translations: Record<string, Record<string, string>> = {
    en: { welcome: 'Welcome', logout: 'Logout' },
    pl: { welcome: 'Witaj', logout: 'Wyloguj' },
  };

  const t = (key: string) => translations[locale]?.[key] || key;

  return <I18nContext.Provider value={{ t }}>{children}</I18nContext.Provider>;
}

function AuthProvider({ children }: PropsWithChildren) {
  const [user, setUser] = React.useState<string | null>('user@example.com');
  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

interface RouterProviderProps {
  initialRoute?: string;
}

function RouterProvider({ children, initialRoute = '/' }: PropsWithChildren<RouterProviderProps>) {
  const [route] = React.useState(initialRoute);
  return <RouterContext.Provider value={{ route }}>{children}</RouterContext.Provider>;
}

interface QueryProviderProps {
  staleTime: number;
}

function QueryProvider({ children, staleTime }: PropsWithChildren<QueryProviderProps>) {
  const cache = React.useMemo(() => new Map(), []);

  React.useEffect(() => {
    const interval = setInterval(() => cache.clear(), staleTime);
    return () => clearInterval(interval);
  }, [cache, staleTime]);

  return <QueryContext.Provider value={{ cache }}>{children}</QueryContext.Provider>;
}

// Main application content
function AppContent() {
  const theme = useContext(ThemeContext);
  const { t } = useContext(I18nContext);
  const { user, logout } = useContext(AuthContext);
  const { route } = useContext(RouterContext);
  const { cache } = useContext(QueryContext);

  return (
    <div data-theme={theme}>
      <nav>
        <h1>{t('welcome')}</h1>
        <p>Current route: {route}</p>
        <p>User: {user || 'Not logged in'}</p>
        <p>Cache size: {cache.size}</p>
        {user && <button onClick={logout}>{t('logout')}</button>}
      </nav>
    </div>
  );
}

// Compose entire application provider stack
const App = compose([
  [ThemeProvider, { theme: 'dark' }],
  [I18nProvider, { locale: 'pl' }],
  AuthProvider,
  [RouterProvider, { initialRoute: '/dashboard' }],
  [QueryProvider, { staleTime: 60000 }],
  AppContent,
]);

// Clean, flat structure instead of deeply nested JSX
export default App;

```

--------------------------------

### Provider Type Definition for Composition Array in TypeScript

Source: https://context7.com/fullstackhouse/react-compose/llms.txt

Defines the `Provider` type for creating type-safe composition arrays. It supports plain components or tuples of [Component, Props] for flexible provider setup. This enables robust composition of React components and their associated props.

```tsx
import React, { ComponentType, PropsWithChildren } from 'react';
import { compose, Provider } from '@fullstackhouse/react-compose';

// Provider type allows either:
// 1. A component: ComponentType<PropsWithChildren<TProps>>
// 2. A tuple: [ComponentType<PropsWithChildren<TProps>>, TProps]

interface ThemeProps {
  theme: 'light' | 'dark';
  primaryColor?: string;
}

function ThemeProvider({ children, theme, primaryColor }: PropsWithChildren<ThemeProps>) {
  return (
    <div data-theme={theme} style={{ color: primaryColor }}>
      {children}
    </div>
  );
}

function NoPropsProvider({ children }: PropsWithChildren) {
  return <div className="wrapper">{children}</div>;
}

function Content() {
  return <h1>Content</h1>;
}

// Type-safe provider array using Provider type
const providers: Provider<any>[] = [
  NoPropsProvider,                                    // Plain component
  [ThemeProvider, { theme: 'dark', primaryColor: '#007acc' }],  // Tuple with props
  Content,
];

// Create composed component
const App = compose(providers);

// Usage in type-safe component factory
function createProviderStack<TProps extends object>(
  wrappers: Provider<any>[],
  content: ComponentType<PropsWithChildren<TProps>>
): ComponentType<TProps> {
  return compose<TProps>([...wrappers, content]);
}

// Example usage of factory
const AuthContext = React.createContext<boolean>(false);

function AuthProvider({ children }: PropsWithChildren) {
  return <AuthContext.Provider value={true}>{children}</AuthContext.Provider>;
}

interface PageProps {
  title: string;
}

function Page({ title }: PageProps) {
  return <h1>{title}</h1>;
}

const SecurePage = createProviderStack<PageProps>(
  [AuthProvider, [ThemeProvider, { theme: 'light' }]],
  Page
);

// Usage
export function Example() {
  return <SecurePage title="Dashboard" />;
}

```

--------------------------------

### Mix Tuple and Non-Tuple Providers with compose

Source: https://context7.com/fullstackhouse/react-compose/llms.txt

Shows how to combine providers that require props (using tuple syntax like `[Component, props]`) with providers that do not (direct component reference) within the same `compose` function array. This offers flexibility in provider configuration. Dependencies include React and `@fullstackhouse/react-compose`.

```tsx
import React, { createContext, useContext, PropsWithChildren } from 'react';
import { compose } from '@fullstackhouse/react-compose';

const ThemeContext = createContext<string>('light');
const AuthContext = createContext<{ isAuth: boolean }>({ isAuth: false });
const ConfigContext = createContext<number>(60);

// Provider with required props
interface ThemeProviderProps {
  theme: string;
}

function ThemeProvider({ children, theme }: PropsWithChildren<ThemeProviderProps>) {
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Provider without props - uses defaults
function AuthProvider({ children }: PropsWithChildren) {
  const [isAuth] = React.useState(true); // Could use auth logic here
  return <AuthContext.Provider value={{ isAuth }}>{children}</AuthContext.Provider>;
}

// Provider with optional props
interface ConfigProviderProps {
  timeout?: number;
}

function ConfigProvider({ children, timeout = 30 }: PropsWithChildren<ConfigProviderProps>) {
  return <ConfigContext.Provider value={timeout}>{children}</ConfigContext.Provider>;
}

function Dashboard() {
  const theme = useContext(ThemeContext);
  const { isAuth } = useContext(AuthContext);
  const timeout = useContext(ConfigContext);

  return (
    <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
      <h1>Dashboard</h1>
      <p>Authenticated: {isAuth ? 'Yes' : 'No'}</p>
      <p>Session timeout: {timeout}s</p>
    </div>
  );
}

// Mix providers with and without props
const App = compose([
  [ThemeProvider, { theme: 'dark' }],      // Tuple - with props
  AuthProvider,                             // No tuple - no props needed
  [ConfigProvider, { timeout: 60 }],       // Tuple - with props
  Dashboard,                                // Content component
]);

export default App;

```

--------------------------------

### Compose React Providers - Passing Props to Providers

Source: https://context7.com/fullstackhouse/react-compose/llms.txt

Illustrates how to pass specific props to individual React context providers during composition using the tuple syntax `[Component, props]`. This is useful for configuring providers. Requires React and the `@fullstackhouse/react-compose` library.

```tsx
import React, { createContext, useContext, PropsWithChildren } from 'react';
import { compose } from '@fullstackhouse/react-compose';

// Define typed contexts
const ThemeContext = createContext<string>('light');
const I18nContext = createContext<string>('en');
const QueryContext = createContext<number>(0);

// Providers with configurable props
interface ThemeProviderProps {
  theme: 'light' | 'dark' | 'auto';
}

function ThemeProvider({ children, theme }: PropsWithChildren<ThemeProviderProps>) {
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

interface I18nProviderProps {
  locale: string;
}

function I18nProvider({ children, locale }: PropsWithChildren<I18nProviderProps>) {
  return <I18nContext.Provider value={locale}>{children}</I18nContext.Provider>;
}

interface QueryProviderProps {
  staleTime: number;
}

function QueryProvider({ children, staleTime }: PropsWithChildren<QueryProviderProps>) {
  return <QueryContext.Provider value={staleTime}>{children}</QueryContext.Provider>;
}

function AppContent() {
  const theme = useContext(ThemeContext);
  const locale = useContext(I18nContext);
  const staleTime = useContext(QueryContext);

  return (
    <div>
      <p>Theme: {theme}</p>
      <p>Locale: {locale}</p>
      <p>Cache time: {staleTime}ms</p>
    </div>
  );
}

// Compose with specific props for each provider
const App = compose([
  [ThemeProvider, { theme: 'dark' }],
  [I18nProvider, { locale: 'pl' }],
  [QueryProvider, { staleTime: 5000 }],
  AppContent,
]);

// All provider props are applied correctly
export default App;
```

--------------------------------

### Compose Directly with React.Context.Provider

Source: https://context7.com/fullstackhouse/react-compose/llms.txt

Illustrates using the `compose` function with `React.Context.Provider` directly, eliminating the need for separate wrapper components. This approach simplifies context composition and works with the tuple syntax for providing values. Requires React and `@fullstackhouse/react-compose`.

```tsx
import React, { createContext, useContext } from 'react';
import { compose } from '@fullstackhouse/react-compose';

// Create contexts
const UserContext = createContext<{ name: string; role: string }>({
  name: 'Guest',
  role: 'viewer',
});

const SettingsContext = createContext<{ darkMode: boolean; language: string }>({
  darkMode: false,
  language: 'en',
});

// Content component consuming both contexts
function AppContent() {
  const user = useContext(UserContext);
  const settings = useContext(SettingsContext);

  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <p>Role: {user.role}</p>
      <p>Dark mode: {settings.darkMode ? 'On' : 'Off'}</p>
      <p>Language: {settings.language}</p>
    </div>
  );
}

// Compose using Context.Provider directly with tuple syntax
const App = compose([
  [UserContext.Provider, { value: { name: 'Alice', role: 'admin' } }],
  [SettingsContext.Provider, { value: { darkMode: true, language: 'pl' } }],
  AppContent,
]);

// No need for separate provider wrapper components
export default App;

```

--------------------------------

### compose - Basic Provider Composition

Source: https://context7.com/fullstackhouse/react-compose/llms.txt

The `compose` function accepts an array of React components and returns a single composed component where providers are nested in the order they appear in the array. The first component becomes the outermost wrapper.

```APIDOC
## compose - Basic Provider Composition

### Description
Composes multiple React components, typically context providers, into a single, flat component structure. The order in the array determines the nesting order, with the first element being the outermost.

### Method
Function Call

### Endpoint
`compose(components: React.ComponentType<any>[]): React.ComponentType<any>

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```tsx
import React from 'react';
import { compose } from '@fullstackhouse/react-compose';

function ProviderA({ children }) { return <div><ProviderA>{children}</ProviderA></div>; }
function ProviderB({ children }) { return <div><ProviderB>{children}</ProviderB></div>; }
function ContentComponent() { return <div>Content</div>; }

const App = compose([
  ProviderA,
  ProviderB,
  ContentComponent
]);

// Renders as:
// <ProviderA>
//   <ProviderB>
//     <ContentComponent />
//   </ProviderB>
// </ProviderA>
```

### Response
#### Success Response (200)
Returns a React component.

#### Response Example
```jsx
<ProviderA>
  <ProviderB>
    <ContentComponent />
  </ProviderB>
</ProviderA>
```
```

--------------------------------

### Basic React Component Composition

Source: https://github.com/fullstackhouse/react-compose/blob/main/README.md

Illustrates a basic usage of the `compose` function to combine multiple React components and providers into a single reusable component.

```tsx
import { compose } from "@fullstackhouse/react-compose";

const MyScreen = compose([
  AuthProvider,
  ThemeProvider,
  MyScreenContent,
]);

// Use it like a normal component
<MyScreen />;
```

--------------------------------

### compose - Passing Props to Providers

Source: https://context7.com/fullstackhouse/react-compose/llms.txt

Configure individual providers by passing them as tuples `[Component, props]` within the composition array. This allows for passing specific props to each provider.

```APIDOC
## compose - Passing Props to Providers

### Description
Allows passing specific props to individual components (providers) within the composition array by using a tuple format `[Component, props]`. This is useful for configuring providers with necessary values.

### Method
Function Call

### Endpoint
`compose(components: Array<React.ComponentType<any> | [React.ComponentType<any>, object]>): React.ComponentType<any>

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```tsx
import React, { createContext, useContext, PropsWithChildren } from 'react';
import { compose } from '@fullstackhouse/react-compose';

const ThemeContext = createContext<string>('light');
const I18nContext = createContext<string>('en');

interface ThemeProviderProps { theme: string; }
function ThemeProvider({ children, theme }: PropsWithChildren<ThemeProviderProps>) {
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

interface I18nProviderProps { locale: string; }
function I18nProvider({ children, locale }: PropsWithChildren<I18nProviderProps>) {
  return <I18nContext.Provider value={locale}>{children}</I18nContext.Provider>;
}

function AppContent() {
  const theme = useContext(ThemeContext);
  const locale = useContext(I18nContext);
  return <p>Theme: {theme}, Locale: {locale}</p>;
}

const App = compose([
  [ThemeProvider, { theme: 'dark' }],
  [I18nProvider, { locale: 'fr' }],
  AppContent
]);

// Renders as:
// <ThemeProvider theme="dark">
//   <I18nProvider locale="fr">
//     <AppContent />
//   </I18nProvider>
// </ThemeProvider>
```

### Response
#### Success Response (200)
Returns a React component with configured providers.

#### Response Example
```jsx
<ThemeProvider theme="dark">
  <I18nProvider locale="fr">
    <AppContent />
  </I18nProvider>
</ThemeProvider>
```
```

--------------------------------

### Mixing Tuple and Non-Tuple Providers in Composition

Source: https://github.com/fullstackhouse/react-compose/blob/main/README.md

Shows how to combine providers that require props (using tuples) with those that do not, within a single `compose` function call.

```tsx
const MyScreen = compose([
  AuthProvider, // No props needed
  [ThemeProvider, { theme: "dark" }], // With props
  [QueryProvider, { staleTime: 5000 }], // With props
  DataProvider, // No props needed
  MyScreenContent,
]);
```

--------------------------------

### Compose React Providers with @fullstackhouse/react-compose

Source: https://github.com/fullstackhouse/react-compose/blob/main/README.md

Shows how to use the `compose` function from @fullstackhouse/react-compose to flatten nested React providers into a single, readable component structure.

```tsx
import { compose } from "@fullstackhouse/react-compose";

const App = compose([
  ThemeProvider,
  AuthProvider,
  I18nProvider,
  RouterProvider,
  QueryProvider,
  AppContent,
]);
```

--------------------------------

### Forward Props to Content Component with compose

Source: https://context7.com/fullstackhouse/react-compose/llms.txt

Demonstrates how props passed to a composed component are automatically forwarded to the innermost content component. This enables type-safe prop passing through a provider chain. It requires React and the `@fullstackhouse/react-compose` library.

```tsx
import React, { createContext, useContext, PropsWithChildren } from 'react';
import { compose } from '@fullstackhouse/react-compose';

const AuthContext = createContext<boolean>(false);

function AuthProvider({ children }: PropsWithChildren) {
  return <AuthContext.Provider value={true}>{children}</AuthContext.Provider>;
}

// Content component with typed props
interface UserProfileProps {
  userId: string;
  showDetails?: boolean;
}

function UserProfile({ userId, showDetails = true }: UserProfileProps) {
  const isAuthenticated = useContext(AuthContext);

  return (
    <div>
      <h2>User Profile</h2>
      {isAuthenticated ? (
        <>
          <p>User ID: {userId}</p>
          {showDetails && <p>Full details displayed</p>}
        </>
      ) : (
        <p>Please log in</p>
      )}
    </div>
  );
}

// Compose with TypeScript generics for type safety
const UserScreen = compose<UserProfileProps>([
  AuthProvider,
  UserProfile,
]);

// Usage - props are type-checked and forwarded to UserProfile
function Example() {
  return (
    <>
      <UserScreen userId="user-123" />
      <UserScreen userId="user-456" showDetails={false} />
    </>
  );
}

export default Example;

```

--------------------------------

### Passing Props to React Providers during Composition

Source: https://github.com/fullstackhouse/react-compose/blob/main/README.md

Demonstrates how to pass specific props to individual providers within the `compose` function using tuple syntax `[Component, props]`.

```tsx
const MyScreen = compose([
  [ThemeProvider, { theme: "dark" }],
  [I18nProvider, { locale: "en" }],
  MyScreenContent,
]);
```

--------------------------------

### Compose Function for Handling Children Props in React

Source: https://context7.com/fullstackhouse/react-compose/llms.txt

Demonstrates the `compose` function's ability to correctly forward `children` props through multiple provider layers to the innermost component. This ensures that content passed to a composed component is rendered correctly within all nested providers.

```tsx
import React, { PropsWithChildren } from 'react';
import { compose } from '@fullstackhouse/react-compose';

// Layout provider
function LayoutProvider({ children }: PropsWithChildren) {
  return (
    <div style={{ padding: '20px', border: '1px solid #ccc' }}>
      {children}
    </div>
  );
}

// Container that expects children
function Container({ children }: PropsWithChildren) {
  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      <header>Header</header>
      <main>{children}</main>
      <footer>Footer</footer>
    </div>
  );
}

// Compose layout components
const Layout = compose([
  LayoutProvider,
  Container,
]);

// Usage - children are properly forwarded
function App() {
  return (
    <Layout>
      <h1>Page Title</h1>
      <p>This content is passed as children and flows through all providers.</p>
      <button>Click me</button>
    </Layout>
  );
}

// Result: Children appear inside Container, wrapped by LayoutProvider
// <LayoutProvider>
//   <Container>
//     <h1>Page Title</h1>
//     <p>This content...</p>
//     <button>Click me</button>
//   </Container>
// </LayoutProvider>

export default App;

```

--------------------------------

### Props Flow to Innermost React Component in Composition

Source: https://github.com/fullstackhouse/react-compose/blob/main/README.md

Explains and shows how props passed to a composed component are automatically forwarded to the innermost component in the composition chain.

```tsx
interface ContentProps {
  userId: string;
}

function UserProfile({ userId }: ContentProps) {
  return <div>User: {userId}</div>;
}

const Screen = compose<ContentProps>([
  AuthProvider,
  UserProfile,
]);

// Props are passed to UserProfile
<Screen userId="123" />;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.