get back missing ref

[advancedtw]

Goals

1. framer motion requires component to have a ref

Background

during the pr #948 all refs have been removed without any mention of why that happened. I'm using framer motion and building a simple visual email designer for my own need. I would like to animate some styles changes like text color etc.

Proposal

possible solution would look something like that

type ButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;

const Button = forwardRef<HTMLAnchorElement, ButtonProps>(
  ({ children, style, target = "_blank", ...props }, forwardedRef) => {
    return (
      // ...
      <a ref={forwardedRef} {...props}>
        <span style={buttonTextStyle(pb)}>{children}</span>
      </a>
      // ...
    );
  },
);

[gabrielmfern]

Why do you need to use framer motion here? I think it might be very misleading to allow for refs here, as they won't do anything unless you use React's usual rendering process.

[advancedtw]

hi gabriel and thank you for your message.

Why do you need to use framer motion here?

I would like to build a visual design tool to author my emails using react-email components. the reason I'm using framer motion is to animate the state changes so when I use the color picker to change the background color, the text color, size etc. I can enjoy a smooth transition.

I think it might be very misleading to allow for refs here, as they won't do anything unless you use React's usual rendering process.

when I preview my email in the browser it is indeed using react rendering process where the component tree contains react-email components. but when I send the emails I recreate the tree and use render/renderAsync server side.

ref are optional and used to be forwarded prior to the mentioned pr. it's not a breaking change to add them but removing them was.

let me know what you think of my use case and thanks again.

[gabrielmfern]

Interesting, I'll think about this. It might actually be the best way to go to include the refs.
I'll look into our commit history to find out when we removed it. Do you know what version bump that changed this?

[advancedtw]

I may be wrong but I think the change happened without a version bump. prior to the refactor to monorepo pr (#948) react-email was at 1.9.5 and Button components were at 0.0.10 and stayed that way. the next bump to 0.0.12 was pr #994.
the removal of the refs happened during #948 commit workflow #8b8870fbb

[gabrielmfern]

I think #948 just changed the components to consistently not forward the ref, some of them didn't and the Button seem to do prior to #948.

[gabrielmfern]

Opened a PR for it @advancedtw #1294

[advancedtw]

thanks Gabriel I really appreciate the proactive approach.