Extending JsxDOM.domProps

1

Hello,

I am currently porting some code over to a ReScript project, and in the original, the <marquee> tag is used. Now I notice that in the definitions none of the props are actually listed.

My question is: how do you extend/inject into ReScript’s existing types? I’d like to add these props myself or just dismiss the error.

2

hey. I’m doing this in another context. You can’t - you have to write a wrapper for jsx/react it seems.

3

Hey, thanks for the quick reply. A shame, how would a wrapper like this look like? I’ll toy about in the meantime, see what I can get done myself.

4

you can probably start by copying this code and changing JsxDOM.domProps to myProps where

type myProps = {
  ...JsxDOM.domProps,
  myProp?: string
}
5

There are some ongoing talks about how to make jsx more extensible in ReScript, the main reason being to use it for non-react frameworks.

Meanwhile, the easiest solution is just to extend JsxDOM.props and copy-paste the needed elements from ReactDOM.res :

module JsxDOM = {
  type domProps = {
    ...JsxDOM.domProps,
    // add your custom props here
    foo?: string,
  }
}

module ReactDOM = {
  type domProps = JsxDOM.domProps
  @module("react/jsx-runtime")
  external jsx: (string, JsxDOM.domProps) => Jsx.element = "jsx"

  @module("react/jsx-runtime")
  external jsxKeyed: (
    string,
    JsxDOM.domProps,
    ~key: string=?,
    @ignore unit,
  ) => Jsx.element = "jsx"

  @module("react/jsx-runtime")
  external jsxs: (string, JsxDOM.domProps) => Jsx.element = "jsxs"

  @module("react/jsx-runtime")
  external jsxsKeyed: (
    string,
    JsxDOM.domProps,
    ~key: string=?,
    @ignore unit,
  ) => Jsx.element = "jsxs"
}

@react.component
let make = () => {
  <marquee foo="hello" />
}

playground link

1 Like