SafeHtml.tsx

/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/anchor-has-content */
import { Trans } from "react-i18next"

const ALLOWED_TAGS = {
  "a": <a />,
  "b": <b />,
  "i": <i />,
  "u": <u />,
  "s": <s />,
  "ul": <ul />,
  "li": <li />,
  "em": <em />,
  "span": <span />,
  "div": <div />
}

/**
 * This component replaces the use of `dangerouslySetInnerHTML`.
 */
type Props = {
  htmlString: string
}
export function SafeHtml({ htmlString }: Props) {
  // We use the Trans component from i18n, because i18n can safely set the html.
  //
  // A different solution would involve installing a different dependency, for example `sanitizeHtml`
  // https://stackoverflow.com/questions/38663751/how-to-safely-render-html-in-react#answer-38663813
  return <Trans
    shouldUnescape
    defaults={htmlString.replaceAll("&nbsp;", " ")}
    components={ALLOWED_TAGS} />
}

depends on "react-i18next": "^11.15.1"