feat(react-i18n): allow react element in HtmlTrans element prop

BedrockStreaming · Dec 18, 2018 · ce7a012 · ce7a012
1 parent 654b030
commit ce7a012
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 2 deletions.
diff --git a/packages/react-i18n/README.md b/packages/react-i18n/README.md
@@ -98,7 +98,7 @@ export default const MyComponent = ({ nbExample, t }) => {
 * **number**: amount used for plural forms
 * **data**: object containing key/values used for interpolation in the translation
 * **general**: use general plural form if truthy
-* **element**: HTML element used to generate ReactElement. (default value: `span`) 
+* **element**: HTML element, or React element used for rendering. (default value: `span`) 
 
 Note that **number** and **data** can be used together.
 

diff --git a/...ages/react-i18n/src/components/__tests__/__snapshots__/i18nElement.component.spec.js.snap b/...ages/react-i18n/src/components/__tests__/__snapshots__/i18nElement.component.spec.js.snap
@@ -19,3 +19,13 @@ exports[`i18n.renderProps should return html translation in a div 1`] = `
   }
 />
 `;
+
+exports[`i18n.renderProps should return html translation in a react element 1`] = `
+<Dummy
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<div>foo.bar</div>",
+    }
+  }
+/>
+`;
diff --git a/packages/react-i18n/src/components/__tests__/i18nElement.component.spec.js b/packages/react-i18n/src/components/__tests__/i18nElement.component.spec.js
@@ -20,4 +20,11 @@ describe('i18n.renderProps', () => {
 
     expect(wrapper.shallow()).toMatchSnapshot();
   });
+
+  it('should return html translation in a react element', () => {
+    const Dummy = props => <dummy {...props} />;
+    const wrapper = getWrapper({ element: Dummy });
+
+    expect(wrapper.shallow()).toMatchSnapshot();
+  });
 });
diff --git a/packages/react-i18n/src/components/i18nElement.component.js b/packages/react-i18n/src/components/i18nElement.component.js
@@ -15,7 +15,7 @@ HtmlTrans.defaultProps = {
 };
 
 HtmlTrans.propTypes = {
-  element: PropTypes.string,
+  element: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   i18nKey: PropTypes.string.isRequired,
   data: PropTypes.object,
   number: PropTypes.number,