SpeziProvider

SpeziContextRouter

Defined in: src/SpeziProvider.tsx:28

Allows injecting the necessary router-related components.

Remarks

Spezi Web is router-agnostic. We need to provide a way to inject router-specific dependencies. Projects can have different routers: Tanstack Router, React Router, Next router. See SpeziProvider for examples with Next and Tanstack Router.

Properties

Property	Type	Description	Defined in
Link	(props) => ReactNode	Link component. Make sure to provide your router's Link component.	src/SpeziProvider.tsx:32

---

SpeziContextType

Defined in: src/SpeziProvider.tsx:35

Properties

Property	Type	Defined in
router	SpeziContextRouter	src/SpeziProvider.tsx:36

---

SpeziContext

const SpeziContext: Context<SpeziContextType | null>;

Defined in: src/SpeziProvider.tsx:39

---

useSpeziContext()

function useSpeziContext(): SpeziContextType;

Defined in: src/SpeziProvider.tsx:45

Returns SpeziContextType from context and validates its presence.

Returns

SpeziContextType

Throws

When used outside SpeziProvider.

---

SpeziProvider()

function SpeziProvider(__namedParameters): Element;

Defined in: src/SpeziProvider.tsx:95

Injects necessary context providers for Spezi components. Wrap your entire application with this component Injected elements:

• router configuration (Link component used by your application)
• CSS variables for theme
• localization messages

Parameters

Parameter	Type
__namedParameters	SpeziProviderProps

Returns

Element

Examples

// Usage with Next.js

import { SpeziProvider, SpeziContextRouter } from "@stanfordspezi/spezi-web-design-system";
import Link from "next/link";

const routerProps: SpeziContextRouter = {
  Link: ({ href, ...props }) => <Link href={href ?? "#"} {...props} />,
};
<SpeziProvider router={routerProps}>...</SpeziProvider>;

// Usage with @tanstack/react-router

import { SpeziProvider, SpeziContextRouter } from "@stanfordspezi/spezi-web-design-system";
import { Link } from "@tanstack/react-router";

const routerProps: SpeziContextRouter = {
  Link: ({ href, ...props }) => <Link to={href} {...props} />,
};
<SpeziProvider router={routerProps}>...</SpeziProvider>;