Theo's Typesafe Cult•2y ago

Better way of typing `useRef` when passing to another hook.

Hello. I'm using react-aria to create some buttons and I would like to be able to type the ref object I pass to the useButton hook without casting it. Is there a way to do this ?

import React from "react";
import { useButton } from "react-aria";

interface FieldButtonProps {
  isPressed: boolean;
  children: React.ReactNode;
}

export default function FieldButton(props: FieldButtonProps) {
  const ref = React.useRef<HTMLInputElement>(null);

  const { buttonProps, isPressed } = useButton(
    props,
    ref as React.RefObject<Element>, // Would like to not cast this if possible.
  );

  return (
    <button
      {...buttonProps}
    >
      {props.children}
    </button>
  );
}

import React from "react";
import { useButton } from "react-aria";

interface FieldButtonProps {
  isPressed: boolean;
  children: React.ReactNode;
}

export default function FieldButton(props: FieldButtonProps) {
  const ref = React.useRef<HTMLInputElement>(null);

  const { buttonProps, isPressed } = useButton(
    props,
    ref as React.RefObject<Element>, // Would like to not cast this if possible.
  );

  return (
    <button
      {...buttonProps}
    >
      {props.children}
    </button>
  );
}

2 Replies

Unknown User•2y ago

Message Not Public

Nestor•2y ago

I'm quite literally blind, saw it like that somewhere in the docs Many thanks Hug

Gaming

Programming

Better way of typing `useRef` when passing to another hook.