How to use React Wrap Balancer for MDX headings

May 20, 2023

I wanted to use React Wrap Balancer to improve headings in my MDX blog posts. I could have imported Balancer and put it around all my headings, but I wanted the computer to do that for me.

Initially, I thought a Remark plugin would do the trick, but after a brief search, I couldn't find a plugin that would swap elements with React components.

Shortly after, I found myself on the next-mdx-remote docs, and I discovered something even simpler.

next-mdx-remote provides direct support for replacing elements, so I replaced h2 (and other headings) using the following:

const components = {
	h2: (props: { children: ReactNode }) => (
		<h2>
			<Balancer>{props.children}</Balancer>
		</h2>
	),
};

<MDXRemote {...source} components={components} />;