A simple "tweet this" React component

While I was playing around with my website, I noticed that I hadn't set up a proper error page yet. Since this is a website made out of MDX files, the worst and only case probably is a 404 error.

Reading the Remix docs on the CatchBoundary, I figured I could make the 404 page more fun. Why not have people shout at me on Twitter if a page is missing? I mean… that's what Twitter is made for, right?

It's surprisingly easy to create a link that prefills the tweet text for people.

Here's the code:

import type { ReactNode } from "react";

export default function TwitterPrefilledTextLink({
  tweetText,
  children,
}: {
  tweetText: string;
  children: ReactNode;
}) {
  const encodedTweetText = encodeURIComponent(tweetText);
  const link = `https://twitter.com/intent/tweet?text=${encodedTweetText}`;
  return (
    <a target="_blank" rel="noreferrer" href={link}>
      {children}
    </a>
  );
}

The one part that's interesting here is probably the encodeURIComponent – it ensures a properly encoded tweet text. The rest is… well, a link.

Have fun with it!