Forwarding refs?

[emilmuller]

I'm using a Button component from a different library, and I want to add a ripple to it.

But it is impossible to get a ref to it because withRipple doesn't forward the ref. I.e. <ButtonWithRipple ref={myref} /> does not get forwarded.

import { withRipple, InjectedProps } from '@material/react-ripple';

interface ButtonWithRippleProps extends ButtonProps, InjectedProps<HTMLElement> {
  initRipple: React.Ref<HTMLElement>;
  unbounded: boolean;
}

const ButtonWithRipple = withRipple<ButtonWithRippleProps, HTMLElement>((props: ButtonWithRippleProps) => {
  const { initRipple, unbounded, ...otherProps } = props;
  return <Button ref={initRipple} {...otherProps} />;
});