CODEWITHSUNDEEP
javascriptjsonreactjsmaterial-uireact-i18next
user8608046
user8608046

Reputation:

How to combine react-i18next with Semantic UI label tag?

I am using Semantic UI with the combination of [react-i18next][2] and need to make label string translatable, but this label has a HTML tag in it, for example span. However, it only accepts string which is hardcoded or variable.

Upvotes: 0

Views: 274

Answers (1)

Joe Lloyd
Joe Lloyd

Reputation: 22353

This is not possible

The props for the FormControlLabel state that the label prop is The text to be used in an enclosing label element.

Check it here

You will have to make a custom label control for this element or extend FormControlLabel (highly suggest you don't extend)

Custom Label

Put your checkbox in as children add it should work, but you need to expand on the controls.

const CustomLabel = (props) => (
  <div dangerouslySetInnerHTML={{__html: t('login.accept')}} />
)

// implementation

<CustomLable />
<Checkbox />

Workaround

What you could do is strip the tags from your strings so that you get the plain text.

cleanText = strInputCode.replace(/<\/?[^>]+(>|$)/g, "");

Upvotes: 1

Related Questions