Being able to add defaultComponent to components

[lukasz81]

It would be awesome if we could decide default component to be used so that we don't need to go through all translation files adding the markup if we need to change.

[aralroca]

I don't understand your proposal @lukasz81, in the translations you put <0> or <some-key> but they are not html-dependent, you decide at the moment of consuming which HTML element or component you want to use. If you always consume them with the same components you can always use the same one or create a Trans wrapper. Can you explain better your proposal? Thanks

[lukasz81]

Sorry let me explain better. I am talking about being able to pass a default component to be used and to achieve the same result like wrapping a Trans with it.
Instead of doing this:

      <p>
        <Trans
          i18nKey={"modals:send-invoice.are-you-sure"}
          values={{ invoice: invoice.name }}
          components={{ s: <strong /> }}
        />
      </p>

I think it would be awesome if we could do this:

        <Trans
          i18nKey={"modals:send-invoice.are-you-sure"}
          values={{ invoice: invoice.name }}
          defaultComponent={{ <p/> }}
          components={{ s: <strong /> }}
        />

This way we could have some logic in defaultComponent as 1 > 0 ? <p/> : <small/>

[aralroca]

Have you considered creating a wrapper of the Trans component to customize it to your liking? Example:

export function Translate({ i18nKey, values, components }) {
 return (
       <Trans
          i18nKey={i18nKey}
          values={values}
          components={{ p: <p/>, ...components }}
        />
   );
}