3rd Party API JSX DOM Attribute/element

1

Upon using a third-party API that provides built-in JSX components and their corresponding attributes.
For example.

For the above example, I used:
bs.module("@airtable/blocks/ui") external text: React.element = “Text”

However, in the provided API, there is a custom attribute named “textColor” that takes a string.
I am not sure how this can be done as the Rescript compiler does not take in any custom attribute.

Thank you in advance!

2

If I didn’t completely misunderstand, Text is just a React component. So you need to bind to it like you bind to any React component. Maybe something like this?

/* Wrap into Text module for clarity */
module Text = {
  @react.component @bs.module
  "@airtable/blocks/ui"
  external make: (~textColor: option<string>=?) => React.element = "Text"
}
/* how to use */
<Text textColor="light" />

But personally I’d go a bit further and try to improve the type safety of the textColor like this:

module Text = {
  type textColor = [#light | #whatEverOtherOptions]
  @react.component @bs.module
  "@airtable/blocks/ui"
  external make: (~textColor: option<textColor>=?) => React.element = "Text"
}
<Text textColor=#light />

Why this is possible is because polyvariants (assuming there are no payloads) compile to strings in javascript.

ps. I’m more familiar with older ReasonML syntax, so I’m not 100% sure my example is correct. But maybe you can at least try that.

2 Likes