GroveProvider

GroveContextRouter

Defined in: packages/design-system/src/GroveProvider.tsx:38

Allows injecting the necessary router-related components.

Remarks

Grove 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 GroveProvider 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.	packages/design-system/src/GroveProvider.tsx:42

---

GroveContextType

Defined in: packages/design-system/src/GroveProvider.tsx:45

Extended by

• GroveProviderProps

Properties

Property	Type	Defined in
router	GroveContextRouter	packages/design-system/src/GroveProvider.tsx:46

---

GroveProviderProps

Defined in: packages/design-system/src/GroveProvider.tsx:65

Extends

• GroveContextType

Properties

Property	Type	Description	Inherited from	Defined in
router	GroveContextRouter	-	GroveContextType.router	packages/design-system/src/GroveProvider.tsx:46
children?	ReactNode	-	-	packages/design-system/src/GroveProvider.tsx:66
messages?	Partial<{ signIn_title: string; signIn_provider: string; signIn_separator: string; signIn_field_email: string; signIn_field_password: string; signIn_submit: string; signIn_formError_firebase: string; signIn_formError_unknown: string; signIn_formError_invalidCredentials: string; }>	Allows overriding default localization messages.	-	packages/design-system/src/GroveProvider.tsx:70
colorScheme?	ColorScheme	Selects the active color scheme. system follows browser and operating-system settings. Existing applications remain light unless this property is provided. Default "light"	-	packages/design-system/src/GroveProvider.tsx:77
themes?	Partial<GroveThemes>	Overrides either of Grove's default theme token sets.	-	packages/design-system/src/GroveProvider.tsx:81

---

GroveContext

const GroveContext: Context<GroveContextType | null>;

Defined in: packages/design-system/src/GroveProvider.tsx:49

---

useGroveContext()

function useGroveContext(): GroveContextType;

Defined in: packages/design-system/src/GroveProvider.tsx:55

Returns GroveContextType from context and validates its presence.

Returns

GroveContextType

Throws

When used outside GroveProvider.

---

GroveProvider()

function GroveProvider(__namedParameters): Element;

Defined in: packages/design-system/src/GroveProvider.tsx:132

Injects necessary context providers for Grove 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	GroveProviderProps

Returns

Element

Examples

// Follow the browser or operating-system color scheme

<GroveProvider router={routerProps} colorScheme="system">
  <App />
</GroveProvider>

// Usage with Next.js

import { GroveProvider, GroveContextRouter } from "@schmiedmayerlab/grove-design-system";
import Link from "next/link";

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

// Usage with @tanstack/react-router

import { GroveProvider, GroveContextRouter } from "@schmiedmayerlab/grove-design-system";
import { Link } from "@tanstack/react-router";

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