stack/docs/templates/components/stack-provider.mdx
Madison 4e467c4026
New docs (#698)
Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
Co-authored-by: Madison Kennedy <madison@Madisons-MacBook-Pro.local>
Co-authored-by: BilalG1 <bg2002@gmail.com>
2025-06-20 13:30:01 -07:00

59 lines
1.5 KiB
Plaintext

---
title: "<StackProvider />"
---
A React component that provides Stack context to its children.
For detailed usage instructions, please refer to the manual section of the [setup guide](../getting-started/setup.mdx).
## Props
<PropTable
props={[
{
name: "children",
type: "React.ReactNode",
description: "The child components to be wrapped by the StackProvider."
},
{
name: "app",
type: "StackClientApp | StackServerApp",
description: "The Stack app instance to be used."
},
{
name: "lang",
type: '"en-US" | "de-DE" | "es-419" | "es-ES" | "fr-CA" | "fr-FR" | "it-IT" | "pt-BR" | "pt-PT"',
description: "The language to be used for translations.",
optional: true
},
{
name: "translationOverrides",
type: "Record<string, string>",
description: "A mapping of English translations to translated equivalents. These will take priority over the translations from the language specified in the lang property. Note that the keys are case-sensitive. You can find a full list of supported strings on GitHub.",
optional: true
}
]}
/>
## Example
```tsx title="layout.tsx"
import { StackProvider } from '@stackframe/stack';
import { stackServerApp } from '@/stack';
function App() {
return (
<StackProvider
app={stackServerApp}
lang="de-DE"
translationOverrides={{
"Sign in": "Einloggen",
"Sign In": "Einloggen",
}}
>
{/* Your app content */}
</StackProvider>
);
}
```