[Docs]: Suggested solution for reusing tags in t.rich elements is unnecessarily complex

[JosipPardon]

Link to page

https://next-intl-docs.vercel.app/docs/usage/messages#rich-text-reuse-tags

Describe the problem

Solution described in https://next-intl-docs.vercel.app/docs/usage/messages#rich-text-reuse-tags is very complex. Much simpler and better solution is this:

export const defaultTags: Record<string, (chunks: ReactNode) => ReactNode> = {
  i: (chunks) => <i>{chunks}</i>,
  /*more tags*/
};

and then:

t.rich("richTextTest", defaultTags)

Also, docs don't describe how to combine default tags with specific ones. Solution is this:

t.rich("richTextTest", {
  ...defaultTags,
  specific: (chunks) => (
    <span style={{ color: "orange" }}>{chunks}</span>
  ),
})

[amannn]

Thanks for the feedback!

Your solution was in fact considered in #611 and is absolutely fine.

However, I went for the render prop way in the docs since it's slightly more flexible IMO:

1. Elements are created in render, giving you the full power of React to construct them (e.g. call hooks beforehand)
2. Can provide an overall layout (e.g. spacing between <p>)

So yes, it's a bit more code up front, but I believe it provides more flexibility without having to think much about it.

I'll leave this open for a bit to see if more users feel this way, would be curious about more opinions!

[github-actions]

This issue has been automatically closed because there was no recent activity and it was marked as unconfirmed. Note that issues are regularly checked and if they remain in unconfirmed state, they might miss information required to be actionable or are potentially out-of-scope. If you'd like to discuss this topic further, feel free to open a discussion instead.