Skip to content

Commit 65f4780

Browse files
authored
docs: Add section on typing children/ReactNode (#1361)
1 parent afe337b commit 65f4780

File tree

1 file changed

+26
-0
lines changed

1 file changed

+26
-0
lines changed

content/en/guide/v10/typescript.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,32 @@ class Expandable extends Component<ExpandableProps, ExpandableState> {
210210

211211
Class components include children by default, typed as `ComponentChildren`.
212212

213+
## Typing children
214+
215+
`ComponentChildren` is a type that represents all valid Preact children. It includes primitive types like `string`, `number`, and `boolean`, but also Preact elements, `null`/`undefined`, and arrays of all of the above. For those familiar with React, it works in a very similar way to `ReactNode`.
216+
217+
```tsx
218+
import { h, ComponentChildren } from 'preact';
219+
220+
interface MyHeadingComponentProps {
221+
children: ComponentChildren;
222+
}
223+
224+
function MyHeadingComponent({ children }: MyHeadingComponentProps) {
225+
return <h1>{children}</h1>;
226+
}
227+
228+
<MyHeadingComponent>
229+
{/* All of these are valid children */}
230+
Hello World!
231+
<strong>Bold Text</strong>
232+
{42}
233+
{true}
234+
{['Array', 'of', 'strings']}
235+
<OtherComponent />
236+
</MyHeadingComponent>
237+
```
238+
213239
## Inheriting HTML properties
214240

215241
When we write components like `<Input />` that wrap the HTML `<input>`, most of the time we'd want to inherit

0 commit comments

Comments
 (0)