diff --git a/packages/freesewing.shared/components/mdx/example/Text/index.js b/packages/freesewing.shared/components/mdx/example/Text/index.js
index 4c31e90a76f..768e6099cab 100644
--- a/packages/freesewing.shared/components/mdx/example/Text/index.js
+++ b/packages/freesewing.shared/components/mdx/example/Text/index.js
@@ -1,22 +1,21 @@
 import React from 'react'
-import { strings } from '@freesewing/i18n'
+import { useTranslation } from 'next-i18next'
 
 const Text = (props) => {
-  let text = []
+  const { t } = useTranslation(['plugin'])
+  const text = []
   // Handle translation
   let translated = ''
   for (let string of props.point.attributes.getAsArray('data-text')) {
-    if (strings[props.language]['plugin.' + string])
-      translated += strings[props.language]['plugin.' + string]
-    else translated += string.toString().replace(/"/g, '"')
-    translated += ' '
+      translated += t(string)
+      translated += ' '
   }
   // Handle muti-line text
   if (translated.indexOf('\n') !== -1) {
     let key = 0
-    let lines = translated.split('\n')
+    const lines = translated.split('\n')
     text.push(<tspan key={'tspan-' + key}>{lines.shift()}</tspan>)
-    for (let line of lines) {
+    for (const line of lines) {
       key++
       text.push(
         <tspan
diff --git a/packages/freesewing.shared/components/mdx/example/TextOnPath/index.js b/packages/freesewing.shared/components/mdx/example/TextOnPath/index.js
index 1ca8cf13c85..9172b844e00 100644
--- a/packages/freesewing.shared/components/mdx/example/TextOnPath/index.js
+++ b/packages/freesewing.shared/components/mdx/example/TextOnPath/index.js
@@ -1,21 +1,20 @@
 import React from 'react'
-import { strings } from '@freesewing/i18n'
+import { useTranslation } from 'next-i18next'
 
 const TextOnPath = (props) => {
-  let text = []
+  const { t } = useTranslation(['plugin'])
+  const text = []
   // Handle translation
   let translated = ''
   for (let string of props.path.attributes.getAsArray('data-text')) {
-    if (strings[props.language]['plugin.' + string])
-      translated += strings[props.language]['plugin.' + string]
-    else translated += string.toString().replace(/&quot;/g, '"')
+    translated += t(string)
     translated += ' '
   }
-  let textPathProps = {
+  const textPathProps = {
     xlinkHref: '#' + props.pathId,
     startOffset: '0%'
   }
-  let align = props.path.attributes.get('data-text-class')
+  const align = props.path.attributes.get('data-text-class')
   if (align && align.indexOf('center') > -1) textPathProps.startOffset = '50%'
   else if (align && align.indexOf('right') > -1) textPathProps.startOffset = '100%'