withWeaverse

Hydrogen only. In a Next.js App Router storefront, mount WeaverseNextRootProvider and WeaverseNextStudioConnect in the root layout instead. See Studio setup.

withWeaverse wraps the root route Layout with the theme settings store, translation provider, and Studio connection bridge. Use it on Layout, not only on the default route component. React Router keeps Layout mounted around both the matched route and ErrorBoundary, so the Studio connection remains available during loader, render, and 404 errors.

Import

import { withWeaverse } from '@weaverse/hydrogen'

Type

type WithWeaverseOptions = {
  t?: TranslateFunction
}

function withWeaverse(
  Component: React.ComponentType<any>,
  options?: WithWeaverseOptions
): (props: React.JSX.IntrinsicAttributes) => React.JSX.Element

Root Loader Requirement

Return the result of loadThemeSettings() under the weaverseTheme key in the root loader:

import type { Route } from './+types/root'

export async function loader({ context }: Route.LoaderArgs) {
  return {
    weaverseTheme: await context.weaverse.loadThemeSettings(),
  }
}

The theme store reads weaverseTheme.theme, while the translation provider also uses staticContent and merchantOverrides from this response.

Usage

Export the wrapped component as the root route Layout:

import { withWeaverse } from '@weaverse/hydrogen'
import type { ReactNode } from 'react'

function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head />
      <body>{children}</body>
    </html>
  )
}

export const Layout = withWeaverse(RootLayout)

Do not wrap the default route component and ErrorBoundary separately. When an error occurs, React Router replaces the default component but keeps Layout mounted.

External Translation Function

Pass a translation function through the optional second argument when integrating another i18n system:

export const Layout = withWeaverse(RootLayout, { t })

The provided function has the highest priority in the translation resolution chain.

What It Provides

withWeaverse mounts:

ThemeSettingsStoreContext
TranslationProvider
StudioConnect

It does not create the page-level WeaverseContext. That runtime context is created by WeaverseHydrogenRoot when it renders a page.

WeaverseHydrogenRoot - Render the Weaverse page runtime
useThemeSettings - Read global theme settings
WeaverseClient - Load root theme settings

Overview

Hooks

Components

Utilities & Types

withWeaverse

withWeaverse

Import

Type

Root Loader Requirement

Usage

External Translation Function

What It Provides

​withWeaverse

​Import

​Type

​Root Loader Requirement

​Usage

​External Translation Function

​What It Provides

​Related

withWeaverse

Import

Type

Root Loader Requirement

Usage

External Translation Function

What It Provides

Related