{"_id":"@beluga-labs/provider-stack","_rev":"3-2bc17f5ba91b640c72a32dd8d2f58abc","name":"@beluga-labs/provider-stack","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@beluga-labs/provider-stack","version":"0.2.0","keywords":["react","react-provider","provider","context","composition","nextjs","remix","gatsby","vite","create-react-app","react-framework"],"author":{"name":"beluga labs"},"license":"MIT","_id":"@beluga-labs/provider-stack@0.2.0","maintainers":[{"name":"beluga-digital","email":"d.baumert96@gmail.com"}],"homepage":"https://github.com/beluga-labs/provider-stack#readme","bugs":{"url":"https://github.com/beluga-labs/provider-stack/issues"},"dist":{"shasum":"466eee60e73e417a30a8824af6cbdd3d316b18be","tarball":"https://registry.npmjs.org/@beluga-labs/provider-stack/-/provider-stack-0.2.0.tgz","fileCount":8,"integrity":"sha512-7qvc2XVSG6XoqYW+PqhN2DMLpmhVcrItKPU56fRAlHTRES/VNDANxV7OWSaorUAwFy4L6ENTPsuH87a320PTdQ==","signatures":[{"sig":"MEUCIQCxqm1ddZHRrnGt7DJZf7I4iJHuui2V1wG0/Hlw+hZPyAIgKRzLvxs4mo8ZrcAf8SWf+nssi+INBG87rlnkSfn4JBk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32712},"main":"dist/index.js","type":"module","_from":"file:beluga-labs-provider-stack-0.2.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"test":"vitest run","build":"rm -rf dist && rollup -c","format":"prettier --write .","example":"cd example && vite","test:watch":"vitest","format:check":"prettier --check ."},"_npmUser":{"name":"beluga-digital","email":"d.baumert96@gmail.com"},"_resolved":"/private/var/folders/ns/4_23_yyj59nbkn7z5fd9dwcc0000gn/T/7c748f505ef3bf3895399b9f6458026b/beluga-labs-provider-stack-0.2.0.tgz","_integrity":"sha512-7qvc2XVSG6XoqYW+PqhN2DMLpmhVcrItKPU56fRAlHTRES/VNDANxV7OWSaorUAwFy4L6ENTPsuH87a320PTdQ==","repository":{"url":"git+https://github.com/beluga-labs/provider-stack.git","type":"git"},"_npmVersion":"11.6.2","description":"Compose React providers into a clean, configurable stack","directories":{},"_nodeVersion":"25.1.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","jsdom":"^26.0.0","react":"^19.0.0","tslib":"^2.8.1","rollup":"^4.53.5","vitest":"^3.0.0","prettier":"^3.0.0","react-dom":"^19.0.0","typescript":"^5.9.3","@types/react":"^19.0.0","@types/react-dom":"^19.2.3","rollup-plugin-dts":"^6.3.0","@vitejs/plugin-react":"^4.0.0","@testing-library/react":"^16.0.0","@rollup/plugin-typescript":"^12.3.0","@testing-library/jest-dom":"^6.0.0","@rollup/plugin-node-resolve":"^16.0.3"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/provider-stack_0.2.0_1766216384056_0.1653532364717878","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Moved to @mantaray0/provider-stack"},"0.2.1":{"name":"@beluga-labs/provider-stack","version":"0.2.1","keywords":["react","react-provider","provider","context","composition","nextjs","remix","gatsby","vite","create-react-app","react-framework"],"author":{"name":"beluga labs"},"license":"MIT","_id":"@beluga-labs/provider-stack@0.2.1","maintainers":[{"name":"beluga-digital","email":"d.baumert96@gmail.com"}],"homepage":"https://github.com/beluga-labs/provider-stack#readme","bugs":{"url":"https://github.com/beluga-labs/provider-stack/issues"},"dist":{"shasum":"25db240b701d0b590e390759d6427bbcd4a3a576","tarball":"https://registry.npmjs.org/@beluga-labs/provider-stack/-/provider-stack-0.2.1.tgz","fileCount":8,"integrity":"sha512-35nBeojwj2lp4xdCBauYQZc0ZCdgckbGlpcKV7kz8mym952ju3vP2rsblgQPcLycBVrA7yD2nwkXBXH5qtToGA==","signatures":[{"sig":"MEQCICeGDNObHpGbAbHsRM/KBRxb4gaKtAn80nK6RusELXzmAiA6HRWCQAeI53n9wY9s4uVg0sgOtAuIGTxLSVtA4BetFw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32607},"main":"dist/index.js","type":"module","_from":"file:beluga-labs-provider-stack-0.2.1.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"test":"vitest run","build":"rm -rf dist && rollup -c","format":"prettier --write .","example":"cd example && vite","test:watch":"vitest","format:check":"prettier --check ."},"_npmUser":{"name":"beluga-digital","email":"d.baumert96@gmail.com"},"_resolved":"/private/var/folders/ns/4_23_yyj59nbkn7z5fd9dwcc0000gn/T/27ef6dc65f67b3b2a8eee512c1e93e6b/beluga-labs-provider-stack-0.2.1.tgz","_integrity":"sha512-35nBeojwj2lp4xdCBauYQZc0ZCdgckbGlpcKV7kz8mym952ju3vP2rsblgQPcLycBVrA7yD2nwkXBXH5qtToGA==","repository":{"url":"git+https://github.com/beluga-labs/provider-stack.git","type":"git"},"_npmVersion":"11.6.2","description":"Compose React providers into a clean, configurable stack","directories":{},"_nodeVersion":"25.1.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","jsdom":"^26.0.0","react":"^19.0.0","tslib":"^2.8.1","rollup":"^4.53.5","vitest":"^3.0.0","prettier":"^3.0.0","react-dom":"^19.0.0","typescript":"^5.9.3","@types/react":"^19.0.0","@types/react-dom":"^19.2.3","rollup-plugin-dts":"^6.3.0","@vitejs/plugin-react":"^4.0.0","@testing-library/react":"^16.0.0","@rollup/plugin-typescript":"^12.3.0","@testing-library/jest-dom":"^6.0.0","@rollup/plugin-node-resolve":"^16.0.3"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/provider-stack_0.2.1_1766256157691_0.8001429974557133","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Moved to @mantaray0/provider-stack"}},"time":{"created":"2025-12-20T07:39:43.978Z","modified":"2026-02-13T19:46:18.300Z","0.2.0":"2025-12-20T07:39:44.211Z","0.2.1":"2025-12-20T18:42:37.923Z"},"bugs":{"url":"https://github.com/beluga-labs/provider-stack/issues"},"author":{"name":"beluga labs"},"license":"MIT","homepage":"https://github.com/beluga-labs/provider-stack#readme","keywords":["react","react-provider","provider","context","composition","nextjs","remix","gatsby","vite","create-react-app","react-framework"],"repository":{"url":"git+https://github.com/beluga-labs/provider-stack.git","type":"git"},"description":"Compose React providers into a clean, configurable stack","maintainers":[{"name":"beluga-digital","email":"d.baumert96@gmail.com"}],"readme":"# @beluga-labs/provider-stack\n\nA lightweight utility to compose React providers into a clean, configurable stack. Works with any React framework including Next.js, Remix, Gatsby, Vite, Create React App, and any other React-based application.\n\n## Features\n\n- **Lightweight**: Minimal bundle size with zero runtime dependencies\n- **Flexible**: Support for wrapping and standalone providers\n- **Type Safe**: Full TypeScript support\n- **Simple API**: Clean syntax for provider composition\n- **Order Control**: Maintain full control over provider nesting order\n- **Two Provider Types**: Wrapping providers (wrap children) and standalone providers (sibling to children)\n\n## Installation\n\n```bash\nnpm install @beluga-labs/provider-stack\n# or\npnpm add @beluga-labs/provider-stack\n# or\nyarn add @beluga-labs/provider-stack\n```\n\n## What is this package?\n\nWhen building React applications, you often need multiple context providers (Theme, Auth, i18n, etc.). Without this package, your code can become messy with deeply nested provider components:\n\n```tsx\n// Without ProviderStack - messy nesting\n<ThemeProvider theme=\"dark\">\n  <AuthProvider session={session}>\n    <QueryClientProvider client={queryClient}>\n      <App />\n      <ToastContainer position=\"top-right\" />\n      <ShortcutHint />\n    </QueryClientProvider>\n  </AuthProvider>\n</ThemeProvider>\n```\n\nWith `@beluga-labs/provider-stack`, you can compose all providers into a clean, declarative array:\n\n```tsx\nimport { ProviderStack, standalone, ProviderDefinition } from '@beluga-labs/provider-stack';\n\n// With ProviderStack - clean and maintainable\nconst providers: ProviderDefinition[] = [\n  // Wrapping providers (wrap children)\n  [ThemeProvider, { theme: 'dark' }],\n  [AuthProvider, { session }],\n  [QueryClientProvider, { client: queryClient }],\n\n  // Standalone providers (rendered as siblings to children)\n  standalone(ToastContainer, { position: 'top-right' }),\n  standalone(ShortcutHint),\n];\n\n<ProviderStack providers={providers}>\n  <App />\n</ProviderStack>;\n```\n\n## Usage\n\n### Basic Setup\n\nImport `ProviderStack` and define your providers as an array:\n\n```tsx\nimport { ProviderStack, standalone, ProviderDefinition } from '@beluga-labs/provider-stack';\nimport { ThemeProvider } from './providers/ThemeProvider';\nimport { AuthProvider } from './providers/AuthProvider';\nimport { ToastContainer } from './providers/ToastContainer';\n\nfunction App() {\n  const providers: ProviderDefinition[] = [\n    // Wrapping providers\n    [ThemeProvider, { theme: 'dark' }],\n    [AuthProvider, { session }],\n\n    // Standalone providers\n    standalone(ToastContainer, { position: 'top-right' }),\n  ];\n\n  return (\n    <ProviderStack providers={providers}>\n      <YourApp />\n    </ProviderStack>\n  );\n}\n```\n\n### Provider Types\n\nThere are two types of providers:\n\n#### 1. Wrapping Providers\n\nWrapping providers wrap the children, like `<Provider>{children}</Provider>`. They can have props or not:\n\n```tsx\nconst providers = [\n  // With props\n  [ThemeProvider, { theme: 'dark' }],\n  [AuthProvider, { session, onSignOut: handleSignOut }],\n\n  // Without props\n  FeatureProvider,\n  [FeatureProvider], // Also valid\n];\n```\n\n#### 2. Standalone Providers\n\nStandalone providers are rendered as siblings to the children, like `<Provider />`. Use the `standalone()` helper:\n\n```tsx\nimport { standalone } from '@beluga-labs/provider-stack';\n\nconst providers = [\n  // With props\n  standalone(ToastContainer, { position: 'top-right' }),\n  standalone(ModalPortal, { container: document.body }),\n\n  // Without props\n  standalone(ShortcutHint),\n  standalone(DevTools),\n];\n```\n\n### Syntax Reference\n\n#### Wrapping Providers\n\nWhen you need to pass configuration props to a provider, use the tuple syntax `[Component, props]`:\n\n```tsx\nconst providers = [\n  [ThemeProvider, { theme: 'dark', colorScheme: 'system' }],\n  [AuthProvider, { session, onSignOut: handleSignOut }],\n  [QueryClientProvider, { client: queryClient }],\n];\n```\n\n**Syntax:**\n\n- `[Component, { prop1: value1, prop2: value2 }]` - Component with props object\n\n**Example:**\n\n```tsx\n// ThemeProvider accepts theme prop\nconst ThemeProvider = ({ theme, children }) => (\n  <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>\n);\n\n// Usage with props\nconst providers = [[ThemeProvider, { theme: 'dark' }]];\n\n// Even if ThemeProvider has optional props, you can still use it without props:\nconst providers = [\n  ThemeProvider, // Uses default/optional props\n];\n```\n\n#### 2. Provider without Props\n\nWhen a provider doesn't need props (or uses default/optional props), you can pass it directly:\n\n```tsx\nconst providers = [FeatureProvider, ToastProvider, ModalProvider];\n```\n\n**Syntax:**\n\n- `Component` - Component without props (uses default/optional props if any)\n- `[Component]` - Also valid (tuple without props object)\n\n**Important:** A provider passed without props can still accept props if they are optional. The difference is only in the syntax used:\n\n```tsx\n// FeatureProvider that accepts optional props\nconst FeatureProvider = ({ enabled = true, children }) => {\n  return <FeatureContext.Provider value={{ enabled }}>{children}</FeatureContext.Provider>;\n};\n\n// Usage - all three are equivalent:\nconst providers = [\n  FeatureProvider, // Uses default props (enabled = true)\n  [FeatureProvider], // Same as above\n  [FeatureProvider, { enabled: false }], // Explicitly passes props\n];\n```\n\n#### 3. Provider with Empty Props Object\n\nYou can also explicitly pass an empty props object:\n\n```tsx\nconst providers = [\n  [FeatureProvider, {}], // Explicitly no props\n];\n```\n\nThis is equivalent to `FeatureProvider` or `[FeatureProvider]`.\n\n### Complete Example\n\nHere's a complete example showing all provider types:\n\n```tsx\nimport { ProviderStack, standalone, ProviderDefinition } from '@beluga-labs/provider-stack';\nimport { ThemeProvider } from './providers/ThemeProvider';\nimport { UserProvider } from './providers/UserProvider';\nimport { FeatureProvider } from './providers/FeatureProvider';\nimport { ToastContainer } from './components/ToastContainer';\nimport { ShortcutHint } from './components/ShortcutHint';\n\nfunction App() {\n  const providers: ProviderDefinition[] = [\n    // WRAPPING PROVIDERS - wrap the children\n    [ThemeProvider, { theme: 'dark' }], // With props\n    [UserProvider, { name: 'John Doe' }], // With props\n    FeatureProvider, // Without props\n\n    // STANDALONE PROVIDERS - rendered as siblings to children\n    standalone(ToastContainer, { position: 'top-right' }), // With props\n    standalone(ShortcutHint), // Without props\n  ];\n\n  return (\n    <ProviderStack providers={providers}>\n      <YourApp />\n    </ProviderStack>\n  );\n}\n```\n\nThis results in the following structure:\n\n```tsx\n<ThemeProvider theme=\"dark\">\n  <UserProvider name=\"John Doe\">\n    <FeatureProvider>\n      <YourApp />\n      <ToastContainer position=\"top-right\" />\n      <ShortcutHint />\n    </FeatureProvider>\n  </UserProvider>\n</ThemeProvider>\n```\n\n**Key Points:**\n\n- **Wrapping providers** use `[Component, props]` or just `Component`\n- **Standalone providers** use `standalone(Component, props)` or `standalone(Component)`\n- Wrapping providers wrap all content (including standalone providers)\n- Standalone providers are rendered as siblings to your children\n\n### Provider Order\n\nThe order in the array determines the nesting structure:\n\n```tsx\n// This configuration:\nconst providers = [A, B, C];\n\n// Results in:\n<A>\n  <B>\n    <C>{children}</C>\n  </B>\n</A>;\n```\n\n**Standalone providers respect their position in the array:**\n\n```tsx\nconst providers = [\n  [ThemeProvider, { theme: 'dark' }], // Wrapping\n  standalone(ToastContainer), // Standalone - at this level\n  [AuthProvider], // Wrapping\n];\n\n// Results in:\n<ThemeProvider theme=\"dark\">\n  <ToastContainer />\n  <AuthProvider>{children}</AuthProvider>\n</ThemeProvider>;\n```\n\nThe `ToastContainer` is rendered as a sibling to `AuthProvider` inside `ThemeProvider`, exactly where it's positioned in the array.\n\n**Important:** Order matters! Providers listed first wrap providers listed later. Standalone providers become siblings at their position.\n\n### Advanced Usage\n\n#### Pre-configured Provider Stack\n\nUse `createProviderStack` to create a reusable provider stack:\n\n```tsx\n// providers.tsx\nimport { createProviderStack, standalone } from '@beluga-labs/provider-stack';\n\nexport const AppProviders = createProviderStack([\n  [ThemeProvider, { theme: 'dark' }],\n  [QueryClientProvider, { client: queryClient }],\n  FeatureProvider,\n  standalone(ToastContainer),\n]);\n\n// layout.tsx or _app.tsx\nimport { AppProviders } from './providers';\n\nexport default function RootLayout({ children }) {\n  return <AppProviders>{children}</AppProviders>;\n}\n```\n\n#### Combining Provider Arrays\n\nUse `combineProviders` to organize providers by concern:\n\n```tsx\nimport {\n  combineProviders,\n  ProviderStack,\n  standalone,\n  ProviderDefinition,\n} from '@beluga-labs/provider-stack';\n\n// Organize providers by concern\nconst coreProviders: ProviderDefinition[] = [\n  [ThemeProvider, { theme }],\n  [I18nProvider, { locale }],\n];\n\nconst dataProviders: ProviderDefinition[] = [\n  [QueryClientProvider, { client: queryClient }],\n  [AuthProvider, { session }],\n];\n\nconst uiProviders: ProviderDefinition[] = [\n  standalone(ToastContainer, { position: 'top-right' }),\n  standalone(ModalPortal),\n];\n\n// Combine them\nconst allProviders = combineProviders(coreProviders, dataProviders, uiProviders);\n\n<ProviderStack providers={allProviders}>\n  <App />\n</ProviderStack>;\n```\n\n## Framework Integration\n\nThis package works with any React framework. Here are examples for popular frameworks:\n\n### Next.js\n\n#### App Router (Next.js 13+)\n\nWith the App Router, provider definitions must be in a Client Component since functions cannot be passed from Server to Client Components.\n\n```tsx\n// app/providers.tsx\n'use client';\n\nimport { ProviderStack, standalone, ProviderDefinition } from '@beluga-labs/provider-stack';\nimport { ThemeProvider } from './providers/ThemeProvider';\nimport { AuthProvider, Session } from './providers/AuthProvider';\nimport { QueryClientProvider, queryClient } from './providers/QueryClientProvider';\nimport { ToastContainer } from './components/ToastContainer';\n\ninterface AppProvidersProps {\n  children: React.ReactNode;\n  session: Session;\n}\n\nexport const AppProviders = ({ children, session }: AppProvidersProps) => {\n  const providers: ProviderDefinition[] = [\n    [ThemeProvider, { theme: 'dark' }],\n    [AuthProvider, { session }],\n    [QueryClientProvider, { client: queryClient }],\n    standalone(ToastContainer, { position: 'top-right' }),\n  ];\n\n  return <ProviderStack providers={providers}>{children}</ProviderStack>;\n};\n```\n\n```tsx\n// app/layout.tsx\nimport { AppProviders } from './providers';\nimport { getSession } from './auth';\n\nexport default async function RootLayout({ children }: { children: React.ReactNode }) {\n  const session = await getSession();\n\n  return (\n    <html lang=\"en\">\n      <body>\n        <AppProviders session={session}>{children}</AppProviders>\n      </body>\n    </html>\n  );\n}\n```\n\nThis pattern allows you to pass dynamic data from Server Components (like user session, translations, etc.) to your Client Component providers.\n\n#### Pages Router\n\n```tsx\n// pages/_app.tsx\nimport { ProviderStack, standalone, ProviderDefinition } from '@beluga-labs/provider-stack';\nimport type { AppProps } from 'next/app';\n\nconst providers: ProviderDefinition[] = [\n  [ThemeProvider, { theme: 'dark' }],\n  [AuthProvider, { session }],\n  [QueryClientProvider, { client: queryClient }],\n  standalone(ToastContainer, { position: 'top-right' }),\n];\n\nexport default function App({ Component, pageProps }: AppProps) {\n  return (\n    <ProviderStack providers={providers}>\n      <Component {...pageProps} />\n    </ProviderStack>\n  );\n}\n```\n\n### Remix\n\n```tsx\n// app/root.tsx\nimport { ProviderStack, standalone, ProviderDefinition } from '@beluga-labs/provider-stack';\n\nconst providers: ProviderDefinition[] = [\n  [ThemeProvider, { theme: 'dark' }],\n  [AuthProvider, { session }],\n  [QueryClientProvider, { client: queryClient }],\n  standalone(ToastContainer, { position: 'top-right' }),\n];\n\nexport default function App() {\n  return (\n    <html>\n      <body>\n        <ProviderStack providers={providers}>\n          <Outlet />\n        </ProviderStack>\n      </body>\n    </html>\n  );\n}\n```\n\n### Vite / Create React App\n\n```tsx\n// src/main.tsx or src/index.tsx\nimport { ProviderStack, standalone, ProviderDefinition } from '@beluga-labs/provider-stack';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst providers: ProviderDefinition[] = [\n  [ThemeProvider, { theme: 'dark' }],\n  [AuthProvider, { session }],\n  [QueryClientProvider, { client: queryClient }],\n  standalone(ToastContainer, { position: 'top-right' }),\n];\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n  <React.StrictMode>\n    <ProviderStack providers={providers}>\n      <App />\n    </ProviderStack>\n  </React.StrictMode>\n);\n```\n\n### Gatsby\n\n```tsx\n// gatsby-browser.js or gatsby-ssr.js\nimport { ProviderStack, standalone, ProviderDefinition } from '@beluga-labs/provider-stack';\nimport React from 'react';\n\nconst providers: ProviderDefinition[] = [\n  [ThemeProvider, { theme: 'dark' }],\n  [AuthProvider, { session }],\n  [QueryClientProvider, { client: queryClient }],\n  standalone(ToastContainer, { position: 'top-right' }),\n];\n\nexport const wrapRootElement = ({ element }) => (\n  <ProviderStack providers={providers}>{element}</ProviderStack>\n);\n```\n\n### Any React Application\n\nSince this package is framework-agnostic, you can use it anywhere React components are used:\n\n```tsx\nimport { ProviderStack, standalone, ProviderDefinition } from '@beluga-labs/provider-stack';\n\nconst providers: ProviderDefinition[] = [\n  [ThemeProvider, { theme: 'dark' }],\n  [AuthProvider, { session }],\n  [QueryClientProvider, { client: queryClient }],\n  standalone(ToastContainer, { position: 'top-right' }),\n];\n\nfunction App() {\n  return (\n    <ProviderStack providers={providers}>\n      <YourApp />\n    </ProviderStack>\n  );\n}\n```\n\n## API Reference\n\n### ProviderStack\n\nThe main component that wraps your application with multiple providers.\n\n#### Props\n\n| Prop      | Type                 | Required | Description                            |\n| --------- | -------------------- | -------- | -------------------------------------- |\n| providers | ProviderDefinition[] | Yes      | Array of providers (first = outermost) |\n| children  | ReactNode            | No       | Your application components            |\n\n### ProviderDefinition\n\nA provider can be defined in several ways:\n\n```tsx\n// Wrapping providers (wrap children)\ntype WrapperDef =\n  | ComponentType                    // Provider without props\n  | [ComponentType]                  // Provider without props (tuple form)\n  | [ComponentType, Props]           // Provider with props\n\n// Standalone providers (sibling to children)\ntype StandaloneDef = standalone(Component) | standalone(Component, props)\n\ntype ProviderDefinition = WrapperDef | StandaloneDef\n```\n\n### standalone\n\nHelper function to create a standalone provider definition:\n\n```tsx\nimport { standalone } from '@beluga-labs/provider-stack';\n\n// Without props\nstandalone(ToastContainer);\n\n// With props\nstandalone(ToastContainer, { position: 'top-right' });\n```\n\nStandalone providers are rendered as siblings to the children, not wrapping them.\n\n### createProviderStack\n\nFactory function to create a pre-configured ProviderStack component.\n\n```tsx\nconst AppProviders = createProviderStack([\n  [ThemeProvider, { theme: 'dark' }],\n  FeatureProvider,\n  standalone(ToastContainer),\n]);\n\n<AppProviders>\n  <App />\n</AppProviders>;\n```\n\n### combineProviders\n\nUtility to combine multiple provider arrays.\n\n```tsx\nconst allProviders = combineProviders(coreProviders, dataProviders, standaloneProviders);\n```\n\n## TypeScript Support\n\nFull TypeScript support is included:\n\n```tsx\nimport { ProviderDefinition, standalone } from '@beluga-labs/provider-stack';\n\nconst providers: ProviderDefinition[] = [\n  // Wrapping providers\n  [ThemeProvider, { theme: 'dark' }],\n  FeatureProvider,\n\n  // Standalone providers\n  standalone(ToastContainer, { position: 'top-right' }),\n  standalone(ShortcutHint),\n];\n```\n\n## Contributing\n\nWe welcome contributions! Please see our [contributing guidelines](CONTRIBUTING.md) for more details.\n\n## License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n","readmeFilename":"README.md"}