Add new prop containerClassName

Author: ShinyChang

README.md

@@ -39,6 +39,7 @@ var TextTruncate = require('react-text-truncate'); // CommonJS or UMD
 
 
 ## Changelog
+* 0.7.1 Add new prop `containerClassName`
 * 0.7.0 Fix infinite update bug, drop raf
 * 0.6.2 Fix infinite loop bug
 * 0.6.1 Fix lib issue for browser

build/bundle.js

@@ -50,6 +50,11 @@ <h3>Property</h3>
                     <td>node</td>
                     <td>undefined</td>
                 </tr>
+                <tr>
+                    <td>containerClassName</td>
+                    <td>string</td>
+                    <td>undefined</td>
+                </tr>
             </tbody>
         </table>
         <div class="page-header">

build/bundle.js.map

@@ -198,8 +198,9 @@
                 var line = _props.line;
                 var showTitle = _props.showTitle;
                 var textTruncateChild = _props.textTruncateChild;
+                var containerClassName = _props.containerClassName;
 
-                var props = _objectWithoutProperties(_props, ['text', 'truncateText', 'line', 'showTitle', 'textTruncateChild']);
+                var props = _objectWithoutProperties(_props, ['text', 'truncateText', 'line', 'showTitle', 'textTruncateChild', 'containerClassName']);
 
                 var renderText = '';
                 if (this.refs.scope) {
@@ -212,7 +213,7 @@
 
                 return _react2.default.createElement(
                     'div',
-                    { ref: 'scope', style: { overflow: 'hidden' } },
+                    { ref: 'scope', className: containerClassName, style: { overflow: 'hidden' } },
                     _react2.default.createElement(
                         'div',
                         props,
@@ -231,7 +232,8 @@
         truncateText: _react2.default.PropTypes.string,
         line: _react2.default.PropTypes.number,
         showTitle: _react2.default.PropTypes.bool,
-        textTruncateChild: _react2.default.PropTypes.node
+        textTruncateChild: _react2.default.PropTypes.node,
+        containerClassName: _react2.default.PropTypes.string
     };
     TextTruncate.defaultProps = {
         text: '',

index.html

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

lib/index.js

@@ -9,8 +9,7 @@ export class App extends Component {
             line: 2,
             truncateText: '…',
             showTitle: true,
-            appendTextTruncateChild: true,
-            raf: true
+            appendTextTruncateChild: true
         };
     }
 
@@ -69,11 +68,13 @@ export class App extends Component {
                     </div>
                 </div>
                 <div className='col-md-6 col-xs-12'>
-                    <label>Result</label>
+                    <h4>Result</h4>
                     <div id='sample-1'>
+                        <h5>1. Default</h5>
                         <TextTruncate {...props}/>
                     </div>
                     <div id='sample-2'>
+                        <h5>2. With floating image</h5>
                         <div className='media'>
                             <div className='media-left'>
                                 <img className='media-object' src='http://fakeimg.pl/64' width='64' height='64'/>
@@ -84,11 +85,16 @@ export class App extends Component {
                         </div>
                     </div>
                     <div id='sample-3'>
+                        <h5>3. Default hidden</h5>
                         <div ref='invisibleBlock' style={{display: 'none'}}>
                             <TextTruncate  ref='invisibleTextTruncate' {...props}/>
                         </div>
                         <button type='button' className='btn btn-default' onClick={this.onToggle}>Toggle show/hide</button>
                     </div>
+                    <div id='sample-4'>
+                        <h5>4. Customize class</h5>
+                        <TextTruncate {...props} containerClassName='text-danger'/>
+                    </div>
                 </div>
             </div>
         )

package.json

@@ -6,7 +6,8 @@ export default class TextTruncate extends Component {
         truncateText: React.PropTypes.string,
         line: React.PropTypes.number,
         showTitle: React.PropTypes.bool,
-        textTruncateChild: React.PropTypes.node
+        textTruncateChild: React.PropTypes.node,
+        containerClassName: React.PropTypes.string
     };
 
     static defaultProps = {
@@ -117,6 +118,7 @@ export default class TextTruncate extends Component {
             line,
             showTitle,
             textTruncateChild,
+            containerClassName,
             ...props
         } = this.props;
 
@@ -130,7 +132,7 @@ export default class TextTruncate extends Component {
         }
 
         return (
-            <div ref='scope' style={{overflow: 'hidden'}}>
+            <div ref='scope' className={containerClassName} style={{overflow: 'hidden'}}>
                 <div {...props}>{renderText}</div>
                 {text === renderText ? null : textTruncateChild}
             </div>