Allow JSX in translations

[Lukasz-pluszczewski]

Is your feature request related to a problem? Please describe. When the translation is JSX (see below), it works fine but validation here logs an error as if the translation is missing.

const translations = {
  foo: {
    'en_US': <div>Foo</div>,
    'pl_PL': <div>Fuu</div>,
  },
}

To avoid the warning you can create a variable translation like this:

const translations = {
  foo: () => ({
    'en_US': <div>Foo</div>,
    'pl_PL': <div>Fuu</div>,
  }),
}

Describe the solution you'd like JSX seems to work fine, so I would suggest allowing JSX translations and:

• improving the validation to prevent unnecessary console warnings when translation is not a string (e.g. allowing non-string values that are valid react elements using React.isValidElement() function).
• updating readme with JSX translation examples

[Lukasz-pluszczewski]

The workaround with variable translation is not perfect, as the type of translated.foo is string instead of a function when the translation function does not return a string:

const translations = {
  foo: () => ({
    'en_US': <div>Foo</div>,
    'pl_PL': <div>Fuu</div>,
  }),
}

translated.foo() // TS2349: This expression is not callable. Type String has no call signatures.

This hack works, but it's not pretty

const translations = {
  foo: () => ({
    'en_US': (<div>Foo</div>) as unknown as string,
    'pl_PL': (<div>Fuu</div>) as unknown as string,
  }),
}

translated.foo() // works as expected