@stanfordspezi/spezi-web-design-system/dist/src/SpeziProvider.d.ts

Stanford Biodesign Digital Health Spezi Web Design System

import { ComponentProps, ReactNode } from 'react';
import { AllMessages } from './messages';
/**
 * 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 {@link SpeziProvider} for examples with Next and Tanstack Router.
 */
export interface SpeziContextRouter {
    /**
     * Link component. Make sure to provide your router's Link component.
     */
    Link: (props: ComponentProps<"a">) => ReactNode;
}
export interface SpeziContextType {
    router: SpeziContextRouter;
}
export declare const SpeziContext: import('react').Context<SpeziContextType | null>;
/**
 * Returns SpeziContextType from context and validates its presence.
 * @throws {Error} When used outside SpeziProvider.
 */
export declare const useSpeziContext: () => SpeziContextType;
interface SpeziProviderProps extends SpeziContextType {
    children?: ReactNode;
    /**
     * Allows overriding default localization messages.
     */
    messages?: Partial<AllMessages>;
}
/**
 * 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
 *
 * @example
 * // Usage with Next.js
 * ```ts
 * 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>;
 * ```
 *
 * @example
 * // Usage with @tanstack/react-router
 * ```ts
 * 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>;
 * ```
 */
export declare const SpeziProvider: ({ children, messages, router, }: SpeziProviderProps) => import("react").JSX.Element;
export {};