useRef

Check out the official React docs!

For more detailed information about React concepts and APIs, please refer to the official documentation for useRef.

---

useRef lets you persist values across renders without causing a re-render. It's commonly used to access DOM elements directly.

This hook is useful for accessing DOM nodes, storing mutable values, or keeping track of values that should not trigger a re-render.

[<ReactComponent(true)>]
let UseRef() =
    let ref = React.useRef(None)
    let inputRef = React.useInputRef()
    let eleRef = React.useElementRef()

    // ..

No timeout started.

Show code

module Example.UseRef

open Feliz
open Fable.Core

[<ReactComponent(true)>]
let UseRef() =
    let timeoutRef = React.useRef(None)
    let message, setMessage = React.useState("No timeout started.")
    Html.div [
        Html.button [
            prop.text "Start Timeout"
            prop.onClick (fun _ ->
                // Clear any existing timeout
                match timeoutRef.current with
                | Some id -> JS.clearTimeout id
                | None -> ()
                // Start a new timeout
                let id = 
                    JS.setTimeout 
                        (fun _ -> 
                            timeoutRef.current <- None
                            setMessage("Timeout finished!")
                        ) 
                        3000
                timeoutRef.current <- Some id
                setMessage("Timeout started. Will finish in 3 seconds.")
            )
        ]
        Html.button [
            prop.text "Cancel Timeout"
            prop.onClick (fun _ ->
                match timeoutRef.current with
                | Some id ->
                    JS.clearTimeout id
                    timeoutRef.current <- None
                    setMessage("Timeout cancelled.")
                | None -> setMessage("No timeout to cancel.")
            )
        ]
        Html.p [ prop.text message ]
    ]

info

Feliz provides two specialized hooks, useInputRef and useElementRef, built on top of useRef for easier access to input elements and general DOM elements, respectively.

useInputRef

Can be used for input elements and casts the ref value to Browser.Types.HTMLInputElement option.

Current value:

Show code

module Example.UseInputRef

open Feliz

[<ReactComponent(true)>]
let UseRef() =
    let inputRef = React.useInputRef()
    let value, setValue = React.useState("")
    Html.div [
        Html.input [
            prop.ref inputRef
            prop.type'.text
            prop.value value
            prop.onChange setValue
            prop.placeholder "Type something..."
        ]
        Html.button [
            prop.text "Focus input"
            prop.onClick (fun _ ->
                match inputRef.current with
                | Some el -> el.focus()
                | None -> ()
            )
        ]
        Html.p [ prop.text $"Current value: {value}" ]
    ]

useElementRef

Can be used for general DOM elements and casts the ref value to Browser.Types.HTMLElement option.

This is a tooltip.

Measured tooltip height: 0px

Show code

module Example.UseLayoutEffect

open Feliz


[<ReactComponent(true)>]
let Tooltip() =
    let tooltipRef = React.useElementRef()
    let tooltipHeight, setTooltipHeight = React.useState(0)
    let padding, setPadding = React.useState(10)

    React.useLayoutEffect((fun () ->
        match tooltipRef.current with
        | Some el ->
            let rect = el.getBoundingClientRect()
            setTooltipHeight(int rect.height)
        | None -> ()
    ), [| box padding |])

    Html.div [
        Html.div [
            prop.ref tooltipRef
            prop.style [ style.backgroundColor.lightYellow; style.color.black; style.padding padding ]
            prop.text "This is a tooltip."
        ]
        Html.p [ prop.text $"Measured tooltip height: {tooltipHeight}px" ]
        Html.input [
            prop.type'.number
            prop.value padding
            prop.onChange setPadding
            prop.placeholder "Set tooltip padding"
        ]
    ]