Skip to content

Commit 74752c0

Browse files
committed
added react 19 ref a prop guide
1 parent 16ea7aa commit 74752c0

File tree

2 files changed

+30
-0
lines changed

2 files changed

+30
-0
lines changed

README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1661,6 +1661,21 @@ export const FancyButton = forwardRef(
16611661

16621662
If you are grabbing the props of a component that forwards refs, use [`ComponentPropsWithRef`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a05cc538a42243c632f054e42eab483ebf1560ab/types/react/index.d.ts#L770).
16631663

1664+
`ref` as a prop:
1665+
1666+
React 19, you can access ref as prop for function components.
1667+
1668+
```tsx
1669+
function MyInput({ placeholder, ref }) {
1670+
return <input placeholder={placeholder} ref={ref} />;
1671+
}
1672+
1673+
// In parent
1674+
<MyInput ref={ref} />;
1675+
```
1676+
1677+
Read more [`ref` as a prop](https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop).
1678+
16641679
#### Generic forwardRefs
16651680

16661681
Read more context in https://fettblog.eu/typescript-react-generic-forward-refs/:

docs/basic/getting-started/forward-create-ref.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,21 @@ export const FancyButton = forwardRef(
6565

6666
If you are grabbing the props of a component that forwards refs, use [`ComponentPropsWithRef`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a05cc538a42243c632f054e42eab483ebf1560ab/types/react/index.d.ts#L770).
6767

68+
`ref` as a prop:
69+
70+
React 19, you can access ref as prop for function components.
71+
72+
```tsx
73+
function MyInput({ placeholder, ref }) {
74+
return <input placeholder={placeholder} ref={ref} />;
75+
}
76+
77+
// In parent
78+
<MyInput ref={ref} />;
79+
```
80+
81+
Read more [`ref` as a prop](https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop).
82+
6883
## Generic forwardRefs
6984

7085
Read more context in https://fettblog.eu/typescript-react-generic-forward-refs/:

0 commit comments

Comments
 (0)