update translate function to return plain string when translation string does not contain HTML

Author: ryanjohnson

README.md

@@ -14,6 +14,7 @@ A collection of helpers for managing localized content in your React/Redux appli
 - [Getting Started](#getting-started)
 - [Features](#features)
 - [API](#api)
+- [Dead simple localization for your React components](https://medium.com/@ryandrewjohnson/adding-multi-language-support-to-your-react-redux-app-cf6e64250050)
 - [Migrating from v1 to v2?](MIGRATING.md)
 
 ## Installation
@@ -248,7 +249,15 @@ Also If you are using a tool like [webpack](https://webpack.js.org) for bundling
 
 A selector that takes the localeReducer slice of your `state` and returns the translate function. This function will have access to any and all translations that were added with [addTranslation](#addtranslationdata).
 
-returns `(key | key[], data) => LocalizedElement | { [key: string]: LocalizedElement }`
+For single translation:
+
+returns `(key: string) => LocalizedElement | string`
+
+For multiple translations:
+
+returns `(key: []string) => { [key: string]: LocalizedElement | string`
+
+> Note: If a translation contains HTML a LocalizedElement will be used to render. In all other cases a string will be used.
 
 * `key: string|array` = A translation key or an array of translation keys.
 * `data: object` = Pass data to your [dynamic translation](#add-dynamic-content-to-translations) string.

src/utils.js

@@ -5,7 +5,7 @@ export const getLocalizedElement = (key, translations, data) => {
   const translatedValue = templater(localizedString, data)
   return hasHtmlTags(translatedValue) 
     ? React.createElement('span', { dangerouslySetInnerHTML: { __html: translatedValue }})
-    : <span>{ translatedValue }</span>;
+    : translatedValue;
 };
 
 export const hasHtmlTags = (value) => {
@@ -28,7 +28,7 @@ export const templater = (strings, data = {}) => {
   }
   return strings;
 }
-
+``
 export const getIndexForLanguageCode = (code, languages) => {
   return languages.map(language => language.code).indexOf(code);
 }

tests/utils.test.js

@@ -6,9 +6,8 @@ describe('locale utils', () => {
   describe('getLocalizedElement', () => {
     it('should return element with localized string', () => {
       const translations = { test: 'Here is my test' };
-      const result = shallow(utils.getLocalizedElement('test', translations));
-      expect(result.find('span').exists()).toBe(true);
-      expect(result.find('span').html()).toEqual(`<span>${translations.test}</span>`);
+      const result = utils.getLocalizedElement('test', translations);
+      expect(result).toBe(translations.test);
     });
 
     it('should return element with HTML from translation rendered', () => {
@@ -22,9 +21,14 @@ describe('locale utils', () => {
     it('should return element with warning when no localized string found', () => {
       const translations = { test: 'Here is my test' };
       const key = 'test2';
-      const result = shallow(utils.getLocalizedElement(key, translations));
-      expect(result.find('span').exists()).toBe(true);
-      expect(result.find('span').html()).toEqual(`<span>Missing locaized: ${key}</span>`);
+      const result = utils.getLocalizedElement(key, translations);
+      expect(result).toEqual(`Missing locaized: ${key}`);
+    });
+
+    it('should replace variables in translation string with data', () => {
+      const translations = { test: 'Hello ${ name }' };
+      const result = utils.getLocalizedElement('test', translations, { name: 'Ted' });
+      expect(result).toEqual('Hello Ted');
     });
   });