React’s Ref

All styled components expose a prop innerRef that will be forwarded to its internal element. This is useful for accessing the underlying DOM node.

module Input = %styled.input(`
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 8px;
  font-size: 16px;
  outline: none;
 
  &:focus {
    border-color: #aaaaaa;
  }
`)
 
@react.component
let make = () => {
  let input = React.useRef(Js.Nullable.null)
 
  let focusInput = () =>
    input.current
    ->Js.Nullable.toOption
    ->Belt.Option.forEach(input => focus(input))
 
  let onClick = _ => focusInput()
 
  <div>
    <Input innerRef={ReactDOM.Ref.domRef(input)} />
    <button onClick> {React.string("Click to focus")} </button>
  </div>
}

module Input = [%styled.input {|
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 8px;
  font-size: 16px;
  outline: none;
 
  &:focus {
    border-color: #aaaaaa;
  }
|}];
 
[@react.component]
let make = () =>
  {
    let input = React.useRef(Js.Nullable.null);
 
    let focusInput = () =>
      input.current
      |> Js.Nullable.toOption
      |> Option.iter(Webapi.Dom.HtmlElement.focus);
 
    let onClick = _ => focusInput();
 
    <div>
      <Input
        innerRef={ReactDOM.Ref.domRef(input)}
      />
      <button onClick> {React.string("Click to focus")} </button>
    </div>;
  };

All information related to React’s Ref is explained in the rescript’s docs.

Inject global styles Media queries