Add support for rtl languages (#1552)

example/storybook/.storybook/preview.js

@@ -14,12 +14,19 @@ export const globalTypes = {
       items: [
         { value: 'en', right: '🇺🇸', title: 'English' },
         { value: 'de', right: '🇩🇪', title: 'Deutsch' },
+        { value: 'ar', right: '🇦🇪', title: 'عربي' },
       ],
       showName: true,
     },
   },
 };
 
+// When The language changes, set the document direction
+i18n.on('languageChanged', (locale) => {
+  const direction = i18n.dir(locale);
+  document.dir = direction;
+});
+
 // Wrap your stories in the I18nextProvider component
 const i18nextStoryDecorator = (Story, context) => {
   const { locale } = context.globals;

example/storybook/public/locales/ar/translation.json

@@ -0,0 +1,7 @@
+{
+  "title": "مرحبًا بكم في التفاعل باستخدام رد فعل i18next",
+  "description": {
+    "part1": "للبدء ، قم بتحرير <1> src / App.js </1> وحفظه لإعادة التحميل.",
+    "part2": "قم بتبديل اللغة بين الإنجليزية والألمانية والعربية باستخدام الأزرار أعلاه."
+  }
+}

example/storybook/public/locales/de/translation.json

@@ -2,6 +2,6 @@
   "title": "Willkommen zu react und react-i18next",
   "description": {
     "part1": "Um loszulegen, ändere <1>src/App(DE).js</1> speicheren und neuladen.",
-    "part2": "Ändere die Sprachen zwischen deutsch und englisch mit Hilfe der beiden Schalter."
+    "part2": "Wechseln Sie mit den Schaltflächen oben zwischen Englisch, Deutsch und Arabisch."
   }
 }

example/storybook/public/locales/en/translation.json

@@ -2,6 +2,6 @@
   "title": "Welcome to react using react-i18next",
   "description": {
     "part1": "To get started, edit <1>src/App.js</1> and save to reload.",
-    "part2": "Switch language between english and german using buttons above."
+    "part2": "Switch language between English, German, and Arabic using buttons above."
   }
 }

example/storybook/src/App.js

@@ -34,6 +34,7 @@ function Page() {
       <div className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <Welcome />
+        <button onClick={() => changeLanguage('ar')}>ar</button>
         <button onClick={() => changeLanguage('de')}>de</button>
         <button onClick={() => changeLanguage('en')}>en</button>
       </div>