syntaxkeywordreasonbucklescriptreason-react

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


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.

Eample from docs

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.


Solution

  • 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>;