My bad, you are correct.

This works for me in the repl

F#:

open Fable.Core.JsInterop
open Fable.React
open Fable.React.Props
open Browser.Types
open Fable.Core

[<Global("React.forwardRef")>]
let forwardRef<'Props,'Ref> (render:('Props -> 'Ref -> ReactElement)) : ReactElementType = jsNative
 // import "forwardRef" "react"

let EmailComponent =
    forwardRef<_, _> (fun _ ref -> 
        input [Ref ref]
    )

let App =
    FunctionComponent.Of(
        fun () -> 
            let emailRef = Hooks.useRef(JS.undefined<HTMLInputElement>)
            let onClick _ =
                emailRef.current.focus()

            div [] [
                ReactBindings.React.createElement(EmailComponent, {| ref = emailRef |}, [])
                button [OnClick onClick] [str "Click me to focus email"]
            ]

        , "App"
    )

mountById "app" (App())

html:

<!doctype html>
<html>
<head>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="__HOST__/libs/react.production.min.js"></script>
  <script src="__HOST__/libs/react-dom.production.min.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

So in your code you probably want something like:

let forwardRef<'Props,'Ref> (render:('Props -> 'Ref -> ReactElement)) : ReactElementType = import "forwardRef" "react"

@vbfox any thoughts on this?

Add forwardRef hook #177

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions