How to pass a reserved keyword as a prop in reason-react

Question

I am trying to use the rimble-ui ui-library, and one of the props that a button takes is called "as". This is unfortunately a reserved word in reason. So I don't know how to use this component in my reason-react app.

Here are the docs for the library.

This is my code:

[@bs.module "rimble-ui"] [@react.component]
external make:
  (~as_: string, ~href: string, ~target: string, ~children: React.element) =>
  React.element =
  "Button";

And my reference for importing to reason-react from js.

Answer 1

BuckleScript removes a prefixed underscore character from reserved words when compiling to JavaScript, so you can name the prop _as and it will work:

module Test = {
  [@bs.module "rimble-ui"] [@react.component]
  external make:
    (~_as: string, ~href: string, ~target: string, ~children: React.element) =>
    React.element =
    "Button";
};

let test = <Test _as="" href="" target="">{React.string("")}</Test>;