[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 https://github.com/amannn/next-intl/issues/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!