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:

3 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