syntaxreasonbucklescriptreason-react

How can we alias props when using the Hooks API?


Previously, I was using [@bs.as "in"] like so.

[@bs.deriving abstract]
type cssTransitionProps = {
  [@bs.as "in"]
  _in: bool,
  timeout: int,
  classNames: string,
};

How can I do something similar here?

module CSSTransition = {
  [@bs.module "react-transition-group"] [@react.component]
  external make:
    (
      ~_in: bool,
      ~timeout: int,
      ~classNames: string,
      ~children: React.element
    ) =>
    React.element =
    "CSSTransition";
};

Solution

  • You don't have to do anything bucklescript will do it for you.

    If you look at the js output you'll see that _in get converted to in

    return React.createElement(ReactTransitionGroup.CSSTransition, {
                  in: match$2[0],
                  timeout: 200,
                  classNames: "my-node",
                  children: React.createElement("div", undefined, React.createElement(CommandsArea.make, {
                            text: text,
                            setText: match[1]
                          }), React.createElement(Toolbar.make, {
                            result: match$1[0]
                          }))
                });