Binding external components with ARIA properties in ReasonReact

ARIA properties are one of the remaining unsolved problems in Reason. In ReactJS, you can write a component like this: <svg aria-label="Greetings" />. Reason, with its stricter syntax, does not allow - in names. Workarounds exist, but no one has found a canonical solution yet.

You can read the official ReasonReact docs explanation here. ReasonReact uses BuckleScript tricks to map safe versions of names to their JavaScript equivalents, so ariaLabel compiles to aria-label. But this trick only applies to DOM elements created by ReasonReact. In other words, ariaLabel will not magically compile to aria-label every time it’s used as a prop.

The problem

If you have an external component and your instinct is to write a binding like this, it won’t work:

module MyIcon = {
  [@bs.module "some-icon-pack"] [@react.component]
  external make: (~ariaLabel: string) => React.element = "MyIcon";
};

<MyIcon ariaLabel="This doesn't work." />;

When this compiles to JavaScript, ariaLabel won’t transform into its kebab-case equivalent, making it useless.

The solution

It took me much too long to figure this out. As far as I can tell, it’s the most straightforward solution with minimal hassle and runtime cost:

module MyIcon = {
  [@bs.module "some-icon-pack"]
  external make: React.component(Js.t({..})) = "MyIcon";
  [@react.component]
  let make = (~ariaLabel: string) =>
    React.createElement(make, {"aria-label": ariaLabel});
};

<MyIcon ariaLabel="It works!" />;

Here, the external component isn’t bound like a regular [@react.component], thus making it incompatible with JSX. But then we create a shadow make function that maps the ariaLabel argument to the correct syntax. When you run BuckleScript, the output works just as you’d expect.

Caveats

If you look at the compiled JavaScript, you’ll noticed that it isn’t zero-runtime. Our second make function still exists as a wrapper around the external component. You can avoid this by manually writing React.createElement(MyIcon.make, {}) throughout your project instead of the JSX <MyIcon />, but I’m skeptical that the effort would be worthwhile.

You may also notice that the typing for the external component isn’t safe in my example code. Js.t({..}) essentially means “this is an object with anything you want inside it.” The unsafe typing is fixed by the fact that I annotated the types for my shadow make function’s props. However, if you want to use the non-JSX React.createElement function throughout your project, then you should properly type the Js.t object in the external binding.

Finally, as far as I can tell, this technique only works in BuckleScript 5.2 or higher.

Final thoughts

I hope you find this technique useful for your own ReasonReact bindings. If there’s a better way of accomplishing this, I’m happy to learn about it and update this post. Special thanks to the great community on the Reason Discord for helping me work through this problem!