hooks.useContent

Type Aliases¶

FragmentProxy¶

FragmentProxy = { __fragment: true; }

Defined in: hooks/useContent.tsx:13

Properties¶

__fragment¶

__fragment: true

Defined in: hooks/useContent.tsx:13

ProxiedContent\<T>¶

ProxiedContent\<T> = T extends Fragment\<infer U, true> ? ProxiedContent\<U> & FragmentProxy : T extends Fragment\<infer U, false | undefined> ? ProxiedContent\<U> & FragmentProxy | undefined : T extends infer U[] ? ProxiedContent\<U>[] : T extends object ? { [K in keyof T]: ProxiedContent<T[K]> } : T

Defined in: hooks/useContent.tsx:18

A proxy type that enables reactive access to nested content with automatic fragment resolution

Type Parameters¶

Type Parameter
`T`

FragmentRefOrId¶

FragmentRefOrId = FragmentRef | string

Defined in: hooks/useContent.tsx:32

Union type for fragment references, accepting either FragmentRef objects or string IDs

Functions¶

useContent()¶

Call Signature¶

useContent\<T>(): ProxiedContent\<T>

Defined in: hooks/useContent.tsx:78

Returns a proxy for accessing your page's content e.g, index.json.props, show.json.props, etc.

For advanced scenarios where you are using Fragments.

{
  data: {
    body: {
      cart: {__id: 'user_cart'}
    },
   footer: {title: "welcome"}},
  },
  fragments: {user_cart: {total: 100}}
}

The proxy will lazily and automatically resolve any FragmentRefs making it as easy as

const data = useContent()
const total = data.body.cart.total

The hook will also automatically tracks fragment dependencies and triggers re-renders only when accessed fragments change.

Type Parameters¶

Type Parameter	Default type	Description
`T`	`JSONMappable`	The data type being accessed (defaults to JSONMappable)

Returns¶

ProxiedContent\<T>

Reactive proxy to page data or fragment data, undefined if fragment not found

Example¶

// Access current page data
const page = useContent()

// Access specific fragment by reference
const user = useContent({__id: 'user_123'})

// Access specific fragment by ID string
const cart = useContent('userCart')

Call Signature¶

useContent\<T>(fragmentRef: FragmentRefOrId): ProxiedContent\<T>

Defined in: hooks/useContent.tsx:108

Passing in a fragment to useContent allows us to scope the tracking of fragments to that hook usage. Its useful in performance scenarios where you want a child component to update, but not the parent.

import {unproxy} from '@thoughtbot/superglue'

const content = useContent()
const rawContent = unproxy(content)

<h1>{content.title}</h1>
<SlidingCart cartRef={rawContent.cart} />

then in SlidingCart

const SlidingCart = (cartRef) => {
  const cart = useContent(cartRef)
}

SlidingCart will update only if the fragment referenced by cartRef updates.

Type Parameters¶

Type Parameter	Default type
`T`	`JSONMappable`

Parameters¶

Parameter	Type	Description
`fragmentRef`	`FragmentRefOrId`	Optional fragment reference for scoped access

Returns¶

ProxiedContent\<T>

unproxy()¶

unproxy\<T>(proxy: T): Unproxy\<T>

Defined in: hooks/useContent.tsx:172

Extracts the underlying state from an useContent proxy

Type Parameters¶

Type Parameter
`T`

Parameters¶

Parameter	Type
`proxy`	`T`

Returns¶

Unproxy\<T>