Idea I am using to avoid using React.string

1

Having to use React.string can be annoying for text heavy applications and components. I fully understand why it’s needed, so no complaints, but I have been testing out an idea and I think I like it.

I have a module html.res:

module P = {
  @jsx.component
  let make = (~children, ~class="") => <p class> {children->Preact.string} </p>
}

module H1 = {
  @jsx.component
  let make = (~children, ~class="") => <h1 class> {children->Preact.string} </h1>
}

// etc

It’s opened in my rescript.json file, so I can use the modules anywhere.

Now in my app I can just do this!

<P class="text-center"> "Hello there!" </P>

I find this a bit easier to work with, at least for me.

Anyway, just thought I would share :slight_smile:

4 Likes
2

Oh I’m actually bootstrapping a documentation portal, and am now going to be stealing this idea for the components…

let make = () =>
  <APIDocs>
    <Summary>
      "Lorum ipsum"
    </Summary>
  </APIDocs>

Nice share

2 Likes
3

Having a <Typography> component is always a good idea.

2 Likes
4

I ended up using a custom React extension where string is simply replaced by __ to reduce the visual noise :man_shrugging:

// MyReact.res
include React
let __ = React.string

// Hello.res
open MyReact
// ...
<div> {__("hello")} </div>
1 Like
5

Yeah I do the same R.s it saves a few keystrokes.

1 Like