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 => input->focus)
 
  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
    ->Belt.Option.forEach(input => input->focus)
 
  let onClick = _ => focusInput()
 
  <div>
    <Input innerRef={ReactDOM.Ref.domRef(input)} />
    <button onClick> {React.string("Click to focus")} </button>
  </div>
}

All information related with React's Ref is explained in rescript's docs.