Skip to content

Commit 230824b

Browse files
authored
Update typegen-component-inference.md
1 parent 511a389 commit 230824b

1 file changed

Lines changed: 6 additions & 6 deletions

File tree

.changeset/typegen-component-inference.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"@portabletext/react": minor
33
---
44

5-
# TypeGen-aware Portable Text components
5+
TypeGen-aware Portable Text components
66

77
`<PortableText>` now infers the shape of every component handler from the `value` prop. When you pass a value typed by [Sanity TypeGen](https://www.sanity.io/docs/apis-and-sdks/sanity-typegen), `components.types`, `components.marks`, `components.block`, `components.list`, and `components.listItem` all receive precise `value` props for the exact content the query returned.
88

@@ -12,7 +12,7 @@ Three new utility types ship with this feature:
1212
- `InferStrictComponents<T>` - strict variant that requires a handler for every inferred custom type, mark, block style, and list style, and rejects handlers that aren't in the schema (and therefore not visible to TypeGen).
1313
- `InferValue<T>` - derives a Portable Text array value type from any TypeGen query result type, useful for re-usable wrapper components.
1414

15-
## Schema
15+
#### Schema
1616

1717
Every example below assumes the same `sanity.config.ts`:
1818

@@ -50,7 +50,7 @@ export default defineConfig({
5050
})
5151
```
5252

53-
## Before: hand-typing handlers
53+
#### Before: hand-typing handlers
5454

5555
Previously, every handler had to be typed by hand to mirror the generated query shape:
5656

@@ -118,7 +118,7 @@ export default async function Page({slug}: {slug: string}) {
118118
}
119119
```
120120

121-
## After: automatic inference
121+
#### After: automatic inference
122122

123123
Now the same handler is fully typed straight from `data.content`:
124124

@@ -162,7 +162,7 @@ export default async function Page({slug}: {slug: string}) {
162162
}
163163
```
164164

165-
## `InferComponents`: hoisting components without losing inference
165+
#### `InferComponents`: hoisting components without losing inference
166166

167167
Move the `components` map out of JSX and keep the same inferred handler types:
168168

@@ -202,7 +202,7 @@ export default async function Page({slug}: {slug: string}) {
202202
}
203203
```
204204

205-
## `InferStrictComponents` + `InferValue`: a strict, re-usable wrapper
205+
#### `InferStrictComponents` + `InferValue`: a strict, re-usable wrapper
206206

207207
`InferValue<SanityQueries[keyof SanityQueries]>` collects every Portable Text item shape from every registered TypeGen query into an array value type, and `InferStrictComponents` requires a handler for each of them. Together they're perfect for a single `CustomPortableText` you reuse across the app:
208208

0 commit comments

Comments
 (0)