Ionic Rescript bindings

,
1

Hi everyone!
I want to announce Ionic bindings for Rescript. GitHub - fabrv/rescript-ionic: Ionic bindings for Rescript

I’m currently working on a big migration to Rescript for a last-mile delivery app. There are some components that I’ll finish in the coming days but as it is it has been working really well for us.

I’m also planning on adding more docs and a couple of example templates.

If anybody wants to help or has any issues let me know :smile:

5 Likes
2

Thank you for sharing this. It’s great users now have another option for trying apps that need to look close to native. I tried Ionic a few months ago and discovered that className and style are almost indispensable for almost every component.

1 Like
3

Not related to Rescript lol but using style in Ionic is a bit of anti-pattern. I see it in devs that are used to Tailwaind but in Ionic you are supposed to use regular CSS and often edit CSS variables.

The reason is because most components have shadow-elements and pseudo-elements that are not easy to theme with inline styles, and because style varies quite a lot between ios and md your inline changes might not look as good in both modes.

For example if you want to edit a button it should look like this:

/* Set the color on all ion-button elements */
ion-button {
  --color: #222;
}

And if you want to style a specific part of the shadow-tree it should be like this

ion-select::part(placeholder) {
  color: blue;
  opacity: 1;
}

I recommend avoiding inline styles and using classes only when necessary.

It’s a different flow than with other frameworks but at end it allows you to have very coherent theming, which I think it’s one of Ionic’s strongest features.

1 Like