From 74752c05713de341d84e086f50a1669211dc6db3 Mon Sep 17 00:00:00 2001 From: Sasiru Ravihansa Date: Tue, 8 Jul 2025 18:42:57 +0530 Subject: [PATCH] added react 19 ref a prop guide --- README.md | 15 +++++++++++++++ docs/basic/getting-started/forward-create-ref.md | 15 +++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/README.md b/README.md index e1f23eab..25fd3059 100644 --- a/README.md +++ b/README.md @@ -1661,6 +1661,21 @@ export const FancyButton = forwardRef( 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). +`ref` as a prop: + +React 19, you can access ref as prop for function components. + +```tsx +function MyInput({ placeholder, ref }) { + return ; +} + +// In parent +; +``` + +Read more [`ref` as a prop](https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop). + #### Generic forwardRefs Read more context in https://fettblog.eu/typescript-react-generic-forward-refs/: diff --git a/docs/basic/getting-started/forward-create-ref.md b/docs/basic/getting-started/forward-create-ref.md index 300fb5de..be1015b3 100644 --- a/docs/basic/getting-started/forward-create-ref.md +++ b/docs/basic/getting-started/forward-create-ref.md @@ -65,6 +65,21 @@ export const FancyButton = forwardRef( 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). +`ref` as a prop: + +React 19, you can access ref as prop for function components. + +```tsx +function MyInput({ placeholder, ref }) { + return ; +} + +// In parent +; +``` + +Read more [`ref` as a prop](https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop). + ## Generic forwardRefs Read more context in https://fettblog.eu/typescript-react-generic-forward-refs/: