useChildInstances

The useChildInstances hook provides access to an array of all direct child component instances of a Weaverse component. This allows parent components to interact with, manipulate, or read data from their children.

Import

import { useChildInstances } from '@weaverse/hydrogen'

Type

function useChildInstances(id?: string): WeaverseItemStore[]

Parameters

id?: string - (Optional) The ID of the component whose children to retrieve. If not provided, uses the current component's ID.

Returns

WeaverseItemStore[] - An array of child component instances, or an empty array if no children exist

Common Use Patterns

Coordinating Layout and Styles

Parent components can coordinate layout and styling across all children:

import { useChildInstances } from '@weaverse/hydrogen'
export function ProductGrid() {  // Access configuration settings  const { gridColumns, gapSize } = useThemeSettings()    // Get all child instances  const childInstances = useChildInstances()    // Apply consistent layout rules to all children  useEffect(() => {    childInstances.forEach(child => {      child.updateData({        width: `calc(100% / ${gridColumns})`,        margin: `${gapSize}px`,      })    })  }, [childInstances, gridColumns, gapSize])    return (    <div className={`grid grid-cols-${gridColumns} gap-${gapSize}`}>      {/* Child components rendered here by Weaverse */}    </div>  )}

Managing Interactive Elements

Parent components can manage interactive functionality across children, such as in carousel or tab implementations:

import { useChildInstances, useState } from '@weaverse/hydrogen'
export function Carousel() {  const [activeIndex, setActiveIndex] = useState(0)  const slides = useChildInstances()    // Set visibility state on slides based on active index  useEffect(() => {    slides.forEach((slide, index) => {      slide.updateData({        isVisible: index === activeIndex,        zIndex: index === activeIndex ? 10 : 1,      })    })  }, [slides, activeIndex])    return (    <div className="carousel">      <div className="carousel-container">        {/* Slides rendered here by Weaverse */}      </div>      <div className="carousel-controls">        {slides.map((_, index) => (          <button             key={index}             onClick={() => setActiveIndex(index)}            className={index === activeIndex ? 'active' : ''}          >            {index + 1}          </button>        ))}      </div>    </div>  )}

Summarizing Child Data

Parent components can collect and summarize data from child components:

import { useChildInstances } from '@weaverse/hydrogen'
export function ReviewsSection() {  const reviewItems = useChildInstances()    // Calculate average rating from all review items  const averageRating = useMemo(() => {    if (reviewItems.length === 0) return 0        const total = reviewItems.reduce((sum, item) => {      const { rating } = item.getSnapShot()      return sum + (rating || 0)    }, 0)        return total / reviewItems.length  }, [reviewItems])    return (    <div className="reviews-section">      <div className="reviews-summary">        <h2>Customer Reviews</h2>        <div className="average-rating">{averageRating.toFixed(1)} / 5</div>      </div>      <div className="reviews-list">        {/* Review items rendered here by Weaverse */}      </div>    </div>  )}

Implementation Details

The useChildInstances hook:

Calls useItemInstance to get the current component instance (or the instance with the provided ID)
Accesses the children data from the component instance
Maps through the children IDs to retrieve each child instance from the Weaverse registry
Returns an array of child component instances

export let useChildInstances = (id?: string) => {  let currentInstance = useItemInstance(id)  if (!currentInstance) return []  let { itemInstances } = Weaverse
  let {    data: { children },  } = currentInstance  return children.map(({ id }: { id: string }) => {    return itemInstances.get(id)  }) as WeaverseItemStore[]}

When To Use

When parent components need to coordinate the behavior or appearance of their children
When implementing interactive components like carousels, tabs, or accordions
When collecting or summarizing data from multiple child components
When applying consistent styling or layout rules across child components

useItemInstance - Access a specific component instance
useParentInstance - Access the parent component instance
useWeaverse - Access the Weaverse instance