How to set indeterminate on a <input /> using a React.useRef()

1

I am trying to figure out how to use a ref to set the indeterminate attribute on an html input.

Here is where I am so far, but the typing is not there for the el to set a indeterminate attr obviously.

   let inputRef = React.useRef(Js.Nullable.null)

    React.useEffect1(() => {
      switch inputRef.current->Js.Nullable.toOption {
      | Some(el) => el.indeterminate = true
      | None => ignore()
      }

      None
    }, [inputRef])

Thanks in advance!

2

You can use the Spread trick to add any attribute to any element: https://reasonml.github.io/reason-react/docs/en/adding-data-props

3

Or you can use external if you need it in hooks

// el->setIndeterminate(true)
@set external setIndeterminate: (t, bool) => unit = "indeterminate"

// el->setIndeterminate
@set external setIndeterminate: (t, @as(json`true`) _) => unit = "indeterminate"
4

How would you go about safely accessing a checkbox checked attribute? I am having issues with a similar binding to the one above to getChecked when there is no checked attribute that exists on the input.

@val external getChecked: Dom.element => bool = "checked"
5

You need @get in this case.

1 Like
6

Ah, I need to do a bit more DD on some of these bindings.

That worked perfectly. Thanks @alex.fedoseev

1 Like