You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/react-types/ComponentProps.md
+10-10
Original file line number
Diff line number
Diff line change
@@ -1,38 +1,38 @@
1
1
---
2
-
title: ComponentProps<Element>
2
+
title: ComponentProps<ElementType>
3
3
---
4
4
5
-
`ComponentProps<Element>`is a utility type that lets you grab all valid props of an element, or infer prop type of a component.
5
+
`ComponentProps<ElementType>`constructs a type with all valid props of an element or inferred props of a component.
6
6
7
7
:::note
8
8
9
-
Prefer `ComponentPropsWithRef<Element>` if ref is forwarded and `ComponentPropsWithoutRef<Element>` when ref is not forwarded.
9
+
Prefer `ComponentPropsWithRef<ElementType>` if ref is forwarded and `ComponentPropsWithoutRef<ElementType>` when ref is not forwarded.
10
10
11
11
:::
12
12
13
13
## Parameters
14
14
15
-
-`T`: An element type. Examples include:
16
-
- An HTML or SVG element such as `"div"`, `"h1"` or `"path"`.
15
+
-`ElementType`: An element type. Examples include:
16
+
- An HTML or SVG element string literal such as `"div"`, `"h1"` or `"path"`.
17
17
- A component type, such as `typeof Component`.
18
18
19
19
## Usage
20
20
21
-
### Getting all valid props of an element
21
+
### Get all valid props of an element
22
22
23
-
`ComponentProps<Element>` can be used to create a type that includes all valid `div` props.
23
+
`ComponentProps<ElementType>` can be used to create a type that includes all valid `div` props.
24
24
25
25
```tsx
26
26
interfacePropsextendsComponentProps<"div"> {
27
27
text:string;
28
28
}
29
29
30
30
function Component({ className, children, text, ...props }:Props) {
31
-
// `Props` includes `text` in addition to all valid `div` props
31
+
// `props` includes `text` in addition to all valid `div` props
32
32
}
33
33
```
34
34
35
-
### Infer prop types from a component
35
+
### Infer component props type
36
36
37
37
In some cases, you might want to infer the type of a component's props.
38
38
@@ -49,7 +49,7 @@ type MyType = ComponentProps<typeof Component>;
49
49
// ^? type MyType = Props
50
50
```
51
51
52
-
#### Inferring specific prop type
52
+
#### Infer specific prop type
53
53
54
54
The type of a specific prop can also be inferred this way. Let's say you are using an `<Icon>` component from a component library. The component takes a `name` prop that determines what icon is shown. You need to use the type of `name` in your app, but it's not made available by the library. You could create a custom type:
0 commit comments