import { AbyssProvider } from '@uhg-abyss/web/ui/AbyssProvider';Usage
Use AbyssProvider at the root of your application to configure theming, routing, translations, and overlay functionality. This is a convenience wrapper that combines multiple provider components into a single, easy-to-use component.
The AbyssProvider internally wraps:
- I18nProvider - For managing translations
- OverlayProvider - For managing overlays like modals and popovers
- ThemeProvider - For managing theming and styling
- RouterProvider - For managing routing
Example
Here's an example showing theme and translations configuration.
| Name | Type | Required | Description |
|---|---|---|---|
router | Router | undefined | The router prop is for the RouterProvider to manage routing. Typically the result of createRouter hook | |
theme | CreateThemeReturn<keyof ThemeMap> | ((parentTheme: CreateThemeReturn<keyof ThemeMap>) => CreateThemeReturn<keyof ThemeMap>) | undefined | The theme prop is for the ThemeProvider to manage theming/styling. Typically the result of createTheme hook | |
translations | (RecursivePartial<{ apply: string; cancel: string; clear: string; close: string; dayOfWeek: { sunday: { full: string; medium: string; }; monday: { full: string; medium: string; }; tuesday: { full: string; medium: string; }; wednesday: { ...; }; thursday: { ...; }; friday: { ...; }; saturday: { ...; }; }; ... 54 more... | The translations prop is for the I18nProvider to manage translations. |