fable-compiler / Fable.Lit

Write Fable Elmish apps with Lit
https://fable.io/Fable.Lit/
MIT License
91 stars 13 forks source link

Use of Hook.useRef #68

Closed francotiveron closed 1 year ago

francotiveron commented 1 year ago

In https://fable.io/Fable.Lit/docs/hook-components.html the first example shows the use of Hook.useRef:

open Lit

[<HookComponent>]
let NameInput() =
    let value, setValue = Hook.useState "World"
    let inputRef = Hook.useRef<HTMLInputElement>()

    html $"""
      <div class="content">
        <p>Hello {value}!</p>
        <input {Ref inputRef}
          value={value}
          @keyup={EvVal setValue}
          @focus={Ev(fun _ -> inputRef.Value |> Option.iter (fun el -> el.select()))}>
      </div>
    """

1 - In the row '<input {Ref inputRef}', where is the symbol 'Ref' defined? It doesn't seem to exist 2 - Is there a complete example/demo where we can see how useRef is intended to be used?

alfonsogarciacaro commented 1 year ago

Ups, sorry. At the end we used Lit.refValue and Lit.refCallback instead of Ref to help the type checker but forgot to update the docs 😅

useRef is very similar to the React hook with the same name. You can see a usage example in Lit.TodoMVC.