Fix #46

Author: ShinyChang

README.md

@@ -41,6 +41,7 @@ var TextTruncate = require('react-text-truncate'); // CommonJS or UMD
     Please polyfill `requestAnimationFrame` before you called `<TextTruncated />`
 
 ## Changelog
+* 0.10.0 Allow pass `element` to specify root element type
 * 0.9.3 Fix SSR window not found (removed raf polyfill)
 * 0.9.2 Fix styles prop is not working when the text is not truncated
 * 0.9.1 Fix async this.forceUpdate() issue

lib/index.js

@@ -244,22 +244,21 @@
         var _this2 = this;
 
         var _props2 = this.props,
+            element = _props2.element,
             text = _props2.text,
             containerClassName = _props2.containerClassName;
 
 
-        var renderText = text;
-        if (this.scope) {
-          renderText = this.getRenderText();
-        }
+        var renderText = this.scope ? this.getRenderText() : text;
+        var rootProps = {
+          ref: function ref(el) {
+            _this2.scope = el;
+          },
+          className: containerClassName,
+          style: { overflow: 'hidden' }
+        };
 
-        return _react2.default.createElement(
-          'div',
-          { ref: function ref(el) {
-              _this2.scope = el;
-            }, className: containerClassName, style: { overflow: 'hidden' } },
-          renderText
-        );
+        return (0, _react.createElement)(element, rootProps, renderText);
       }
     }]);
 
@@ -268,12 +267,14 @@
 
   TextTruncate.propTypes = {
     containerClassName: _propTypes2.default.string,
+    element: _propTypes2.default.string,
     line: _propTypes2.default.number,
     text: _propTypes2.default.string,
     textTruncateChild: _propTypes2.default.node,
     truncateText: _propTypes2.default.string
   };
   TextTruncate.defaultProps = {
+    element: 'div',
     line: 1,
     text: '',
     truncateText: '…'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-text-truncate",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "description": "Truncate text for React.js",
   "main": "lib/index.js",
   "scripts": {

src/TextTruncate.js

@@ -1,16 +1,18 @@
-import React, {Component} from 'react';
+import React, {Component, createElement} from 'react';
 import PropTypes from 'prop-types';
 
 export default class TextTruncate extends Component {
   static propTypes = {
     containerClassName: PropTypes.string,
+    element: PropTypes.string,
     line: PropTypes.number,
     text: PropTypes.string,
     textTruncateChild: PropTypes.node,
     truncateText: PropTypes.string
   };
 
   static defaultProps = {
+    element: 'div',
     line: 1,
     text: '',
     truncateText: '…'
@@ -154,19 +156,18 @@ export default class TextTruncate extends Component {
 
   render() {
     const {
+      element,
       text,
       containerClassName,
     } = this.props;
 
-    let renderText = text;
-    if (this.scope) {
-      renderText = this.getRenderText();
-    }
+    const renderText = this.scope ? this.getRenderText() : text;
+    const rootProps = {
+      ref: (el) => {this.scope = el},
+      className: containerClassName,
+      style: {overflow: 'hidden'}
+    };
 
-    return (
-      <div ref={(el) => {this.scope = el;}} className={containerClassName} style={{overflow: 'hidden'}}>
-        {renderText}
-      </div>
-    );
+    return createElement(element, rootProps, renderText);
   }
 };