Extend React forwardRef component with methods

Question

I want to create an extended component with some additional functions added.

Let's say I have an ExtendedButton component which has a button that is forwardRef:ed, but which also has a doubleClick method. I know this is a silly example, but something like this:

const ExtendedButton = forwardRef<HTMLButtonElement, React.HTMLAttributes<HTMLButtonElement>>((props, ref) => {
  const btnRef = useRef<HTMLButtonElement>(null);
  useImperativeHandle(ref, () => btnRef?.current as HTMLButtonElement);

  const doubleClick = () => {
    btnRef.current?.click();
    btnRef.current?.click();
  };

  return <button {...props} ref={btnRef}></button>;
});

I want to be able to get the doubleClick method, as well as all the methods on the button, from a consumer component like this:

export const Consumer = () => {
  const ref = useRef<HTMLButtonElement>(null);

  ref.current.doubleClick();
  ref.current.click();

  return <ExtendedButton ref={ref}></ExtendedButton>;
};

I feel I should probably remove the forwardRef so the ref is pointing to ExtendedButton instead of button, but how can I get the button methods then?

Thanks!

thedude · Accepted Answer · 2022-12-01 10:47:18Z

1

useImperativeHandle should expose all the methods you want to access:

type ExtendedButtonType = HTMLButtonElement & { doubleClick: () => void }
const ExtendedButton = forwardRef<ExtendedButtonType, React.HTMLAttributes<HTMLButtonElement>>(
  (props, ref) => {
    const btnRef = useRef<HTMLButtonElement>(null)
    const doubleClick = (): void => {
      btnRef.current?.click()
      btnRef.current?.click()
    }
    useImperativeHandle(
      ref,
      () =>
        ({
          ...btnRef.current,
          doubleClick,
        } as ExtendedButtonType),
    )

    return <button {...props} ref={btnRef} />
  },
)

export const Consumer: FC = () => {
  const ref = useRef<ExtendedButtonType>(null)

  ref.current?.doubleClick()
  ref.current?.click()

  return <ExtendedButton ref={ref} />
}

answered Dec 1, 2022 at 10:47

thedude

9,8371 gold badge34 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Boom PT Over a year ago

Is there a way to do without as ExtendedButtonType?

thedude Over a year ago

Seems like removing as ExtendedButtonType is fine

Sachila Ranawaka · Accepted Answer · 2022-12-01 10:50:27Z

0

add the method inside the useImperativeHandle

  const ExtendedButton = forwardRef<HTMLButtonElement, React.HTMLAttributes<HTMLButtonElement>>((props, ref) => {
      const btnRef = useRef<HTMLButtonElement>( );
     
      
      useImperativeHandle(ref, () => ({

        ...btnRef.current,
        doubleClick: () => {
          btnRef.current?.click();
          btnRef.current?.click();
         };
      }));
    
      return <button {...props} ref={btnRef}></button>;
    });

edited Dec 1, 2022 at 10:50

answered Dec 1, 2022 at 10:41

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

1 Comment

Boom PT Over a year ago

It works but throw error as follow: Types of property 'disabled' are incompatible. Type 'boolean | undefined' is not assignable to type 'boolean'

Collectives™ on Stack Overflow

Extend React forwardRef component with methods

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related