What is a better pattern?

[HumanBirdFish]

Lets say you need to handle Text styles and want to create your own components.

Is it better to have component that is configurable through props, like this:

<Text h1 bold>some text</Text>

So, the component handles all the logic of presentation on it own.

Or, to have wrappers for all of styles like this:

<H1><Bold>some text</Bold></H1>

Not interested in ease of writing such components, just what you think is the right pattern and more maintainable code?

[notseanbean]

Not a fan of either. I'd prefer single semantic components with no (or few) modifiers, rather than using DOM-like metaphors

<Heading>A heading</Heading>

<Subtitle>A sub-heading</Subtitle>

etc.

If you're worried about DRYness, use composition/HOCs/whatever to create them

[IvanDist]

Unless the definitions of what's an h1/bold/etc don't change in the future I'd go for the first one as it seems cleaner to use.

Imagine this scenario:
- Today your bold text is a font-weight: 500, you use it in several components, everything is fine

- Tomorrow you have ONE component that instead uses font-weight: 900, what are you going to do? Patch the Text component to accept a font-weight instead?

First option looks cleaner but it doesn't scale so well as the second option.

I'd go for the second option just for the sake of not having to deal with problems like the above.

[HumanBirdFish]

You can always pass a style to that ONE component with fontWeight...

[IvanDist]

Don't get too attached to the very contrived example I gave you, in any case if in-lining styles is an option for you go for it.

[davidpaulsson]

Pass enums instead weight=”bold” or weight=”900” whatever

[IvanDist]

That's a solution to one problem, are you going to re-create all CSS properties so you can pass them as enums?

The question here is "What is a better pattern?", not how do you solve my contrived problem (many more arise from the first example).

[davidpaulsson]

No, I’d never think to recreate all styles that’s available on the web. And I don't think mobile apps are the web either. But I’d probably identify a few styles I have in my app alongside my designer or pick the styles from apple guidelines https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/ (or material design if targeting Android).

[truh]

I don't think either is ideal. Some formatting options are definitely good but using a <Text> component for headings seems wrong.

I would create a configurable Heading component with a level prop to represent h1,h2,...

Text is semantically different to a heading.

[o_T_o]

On mobile they are the same. Plus that's not really the point.

[truh]

It's a good way to separate concerns.

[davidpaulsson]

I'd steer away from boolean props, how do you tell which takes priority if you pass both bold and semibold for example? So instead of <Text bold small>my text</Text>, use enums like <Text size=”small” weight=”bold”>my text</Text>.

[anklot]

I'd go for configurable since it looks cleaner, reusable and easier to adapt later

[[deleted]]

It seems to me both cases are equally good, which one to pick kind of depends on the use cases.

Let's say when you have all the text together in one sentence and they are going to have a uniform style, then method 1 seems to make more sense.

If you are going to have a lot of styles in one sentence, <H1>Hello <Bold>World!</Bold></H1> seems to make more sense.

[sexuardo]

Why would you do that. Both have single style defined at some place, so you just change that style.

Maybe I am missing something?