Merge pull request #278 from curvetips/trans-parent

Make Trans parent element configurable.
i18next · Jul 25, 2017 · 422815d · 422815d
2 parents 4b05e4f + a4a1b34
commit 422815d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/src/trans.js b/src/trans.js
@@ -101,7 +101,7 @@ export default class Trans extends React.Component {
   }
 
   render() {
-    const { children, count } = this.props;
+    const { children, count, parent } = this.props;
 
     const defaultValue = nodesToString('', children, 0);
     const key = this.props.i18nKey || defaultValue;
@@ -118,13 +118,23 @@ export default class Trans extends React.Component {
     }
 
     return React.createElement(
-      'div',
+      parent,
       additionalProps,
       renderNodes(children, translation, this.i18n)
     );
   }
 }
 
+Trans.propTypes = {
+  count: PropTypes.number,
+  parent: PropTypes.string,
+  i18nKey: PropTypes.string
+};
+
+Trans.defaultProps = {
+  parent: 'div',
+};
+
 Trans.contextTypes = {
   i18n: PropTypes.object.isRequired,
   t: PropTypes.func.isRequired

diff --git a/test/trans.render.spec.js b/test/trans.render.spec.js
@@ -13,11 +13,11 @@ function Link({ to, children }) {
 }
 
 describe('trans simple', () => {
-  const TestElement = ({ t }) => {
+  const TestElement = ({ t, parent }) => {
     const count = 10;
     const name = "Jan";
     return (
-      <Trans i18nKey="transTest1">
+      <Trans i18nKey="transTest1" parent={parent}>
         Open <Link to="/msgs">here</Link>.
       </Trans>
     );
@@ -34,8 +34,20 @@ describe('trans simple', () => {
       </div>
     )).toBe(true);
   });
+
+  it('can use a different parent element', () => {
+    const HocElement = translate(['translation'], {})(TestElement);
+
+    const wrapper = mount(<HocElement parent="span" />, { context });
+    expect(wrapper.contains(
+      <span>
+        Go <Link to="/msgs">there</Link>.
+      </span>
+    )).toBe(true);
+  });
 });
 
+
 describe('trans complex', () => {
   const TestElement = ({ t }) => {
     const count = 10;