DgaProvider
DgaProvider is the root of every @dev-dga app: it sets direction, dark mode, and the brand theme, and hosts the portal so overlays inherit them. Wrap once.
Import the stylesheet once (import '@dev-dga/css') and wrap your app in one DgaProvider. It supplies direction, dark mode, and theme to every component, including overlays.
When to use
Use DgaProvider once at the root of your application, after importing @dev-dga/css. Set dir="rtl" for Arabic, mode="dark" for dark mode, and theme to pick the brand palette. Every component, including modals and menus rendered in portals, reads these values from the provider.
Nested providers are possible for a preview that differs from the page, such as the examples on this site.
Examples
Props
Props declared by DgaProvider. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
dir | "ltr" | "rtl" | ||
locale | string | ||
mode | "dark" | "light" | ||
theme | DgaTheme | Brand theme. theme.primary accepts a palette name ('lavender'),
any CSS color string ('#7C3AED' , hover/active auto-derived via
color-mix()), or an explicit { base, hover, active, foreground? }
triplet. The override-object pattern (style={{ '--ddga-color-primary': '...' }}) still works , style wins over theme. | |
as | DgaRootElement | ||
className | string | ||
style | react.CSSProperties | ||
childrenrequired | react.ReactNode |
Accessibility
The provider sets the dir attribute so the browser's bidirectional algorithm and assistive technology follow the reading direction. Set lang on the document yourself so screen readers switch voices for Arabic.
Overlays render inside the provider's portal, so they inherit direction, theme, and contrast settings rather than falling back to the document defaults.