WeaverseRoot

The WeaverseRoot component is the primary renderer for Weaverse content in React applications. It serves as the entry point for rendering dynamic, data-driven Weaverse components based on the provided Weaverse context.

Import

import { WeaverseRoot } from '@weaverse/hydrogen'

Props

Prop	Type	Description
`context`	`Weaverse`	The Weaverse instance containing the project data and component registry.

Type Definition

interface WeaverseRootPropsType {  context: Weaverse;}
const WeaverseRoot: React.FC<WeaverseRootPropsType>;

Usage

import { WeaverseRoot, useWeaverse } from '@weaverse/hydrogen'
export function App() {  const weaverse = useWeaverse()    return (    <div className="app-container">      <Header />      <main>        <WeaverseRoot context={weaverse} />      </main>      <Footer />    </div>  )}

How It Works

The WeaverseRoot component:

Creates a React context provider that makes the Weaverse instance available throughout the component tree
Renders the root component from the Weaverse project data
Sets up the necessary DOM structure with data attributes for Weaverse Studio integration
Establishes the component tree based on parent-child relationships defined in the project data
Passes appropriate props and data to each component in the tree

Rendering Process

The component subscribes to changes in the Weaverse instance using useSyncExternalStore
It renders a container element with appropriate Weaverse data attributes
It finds the root component ID from the Weaverse data
It recursively renders each component in the tree using internal ItemInstance and ItemComponent components
Each component receives its data and children components based on the Weaverse project structure

Example: Full Page Structure

import { WeaverseRoot } from '@weaverse/hydrogen'import { useLoaderData } from '@remix-run/react'
export default function Page() {  const { weaverseData } = useLoaderData()    return (    <html lang="en">      <head>        <meta charSet="utf-8" />        <meta name="viewport" content="width=device-width,initial-scale=1" />        <title>My Weaverse App</title>      </head>      <body>        <WeaverseRoot context={weaverseData} />      </body>    </html>  )}

Notes

Only one WeaverseRoot component should be used per page
The component automatically handles the entire component tree rendering
No need to manually render children - the component handles parent-child relationships
The component adds necessary data attributes for Weaverse Studio integration
Returns null if no valid Weaverse context or project ID is provided

useWeaverse - Hook to access the Weaverse instance
WeaverseHydrogenRoot - Hydrogen-specific wrapper around WeaverseRoot
useItemInstance - Access component instances in the tree