I recently created a grid system using custom HTML elements and wanted to use it in my React project, except JSX doesn’t like tags with dashes. Below is a quick solution I found.

// types/grid-container.ts
import type { DetailedHTMLProps, HTMLAttributes } from "react";
interface ContainerAttributes extends HTMLAttributes<HTMLElement> {
  size?: string;
}
interface ColAttributes extends HTMLAttributes<HTMLElement> {
  span?: string;
}
declare module "react/jsx-runtime" {
  namespace JSX {
    interface IntrinsicElements {
      "grid-container": DetailedHTMLProps<ContainerAttributes, HTMLElement>;
      "grid-row": DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
      "grid-col": DetailedHTMLProps<ColAttributes, HTMLElement>;
    }
  }
}

// types/grid-container.ts
import type { DetailedHTMLProps, HTMLAttributes } from "react";

interface ContainerAttributes extends HTMLAttributes<HTMLElement> {
  size?: string;
}
interface ColAttributes extends HTMLAttributes<HTMLElement> {
  span?: string;
}
declare module "react/jsx-runtime" {
  namespace JSX {
    interface IntrinsicElements {
      "grid-container": DetailedHTMLProps<ContainerAttributes, HTMLElement>;
      "grid-row": DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
      "grid-col": DetailedHTMLProps<ColAttributes, HTMLElement>;
    }
  }
}

I create a TS file defining my custom elements, then can apply it, like so:

// Using in my components
function MyComponent() {
  return (
      <grid-container size="lg">
      </grid-container>
  );
}

// Using in my components
function MyComponent() {
  return (
      <grid-container size="lg">
      </grid-container>
  );
}

After an eight-year hiatus, I’ve decided to restore this blog. It felt like a human way of contributing to the web amidst all of the current hype around AI. I don’t really believe in AI writing for me, so you won’t catch me using it for that, here.

I initially lost the SQL to the previous iteration of this site (which ran from 2006-2018, RIP), but upon recovering it, it was shocking to many external links have since expired. I view it as an opportunity to start new, and I’ll probably be sticking to more technical stuff.

One thing that hasn’t changed is that this site remains in WordPress. I share DHH’s opinion on how Automattic is weaponizing open source, and contemplated using an open-source headless CMS (I really like Astro), but ultimately this forces me to keep up with what still runs a majority of the web, for better or worse.

I guess we’ll see how well I keep up. Cheers!