From 3b98a00de05b518a44bf4bc0028b86e9e00d423b Mon Sep 17 00:00:00 2001
From: Nicolas Ramirez <ramirezcgn@gmail.com>
Date: Fri, 23 Apr 2021 16:54:30 -0300
Subject: [PATCH 1/8] some fixes

---
 src/html.js          |  5 +++--
 src/index.js         |  5 +++--
 src/responsiveHOC.js | 41 ++++++++++++++++++++++++++++++++---------
 3 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/html.js b/src/html.js
index 0850bc9..5ed4d3e 100644
--- a/src/html.js
+++ b/src/html.js
@@ -12,7 +12,7 @@ function hookNode (node, basedOn) {
     let units
     switch (basedOn) {
       case 'words':
-        units = node.textContent.split(/\b|(?=\W)/)
+        units = node.textContent.match(/[^\s]+|\s/g)
         break
       case 'letters':
         units = Array.from(node.textContent)
@@ -96,6 +96,7 @@ class HTMLEllipsis extends React.Component {
     this.canvas = null
     this.maxLine = 0
     this.nlUnits = []
+    this.target = React.createRef()
   }
 
   componentDidMount () {
@@ -230,7 +231,7 @@ class HTMLEllipsis extends React.Component {
     return (
       <Component
         className={`LinesEllipsis ${clamped ? 'LinesEllipsis--clamped' : ''} ${className}`}
-        ref={node => (this.target = node)}
+        ref={this.target}
         {...omit(rest, usedProps)}
       >
         <div dangerouslySetInnerHTML={{__html: clamped ? html : unsafeHTML}} />
diff --git a/src/index.js b/src/index.js
index 9ea123e..f21afbd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -39,6 +39,7 @@ class LinesEllipsis extends React.Component {
     this.units = []
     this.maxLine = 0
     this.canvas = null
+    this.target = React.createRef()
   }
 
   componentDidMount () {
@@ -90,7 +91,7 @@ class LinesEllipsis extends React.Component {
     const basedOn = props.basedOn || (/^[\x00-\x7F]+$/.test(props.text) ? 'words' : 'letters')
     switch (basedOn) {
       case 'words':
-        this.units = props.text.split(/\b|(?=\W)/)
+        this.units = props.text.match(/[^\s]+|\s/g)
         break
       case 'letters':
         this.units = Array.from(props.text)
@@ -168,7 +169,7 @@ class LinesEllipsis extends React.Component {
     return (
       <Component
         className={`LinesEllipsis ${clamped ? 'LinesEllipsis--clamped' : ''} ${className}`}
-        ref={node => (this.target = node)}
+        ref={this.target}
         {...omit(rest, usedProps)}
       >
         {clamped && trimRight
diff --git a/src/responsiveHOC.js b/src/responsiveHOC.js
index 9016a85..21139d2 100644
--- a/src/responsiveHOC.js
+++ b/src/responsiveHOC.js
@@ -1,36 +1,59 @@
 const React = require('react')
 const debounce = require('lodash/debounce')
-const isBrowser = typeof window !== 'undefined'
 
 function responsiveHOC (wait = 150, debounceOptions) {
   return Component => {
     class Responsive extends React.Component {
       constructor (props) {
         super(props)
+        const {innerRef} = props
+        this.innerRef = innerRef || React.createRef()
         this.state = {
-          winWidth: isBrowser ? window.innerWidth : 0
+          winWidth: window.innerWidth
         }
-        this.onResize = debounce(this.onResize.bind(this), wait, debounceOptions)
+        this.forceUpdate = this.forceUpdate.bind(this)
+        this.onResize = debounce(this.forceUpdate, wait, debounceOptions)
+        this.resizeObserver = null
       }
 
       componentDidMount () {
-        window.addEventListener('resize', this.onResize)
+        const { current } = this.innerRef
+        const { fonts } = document
+        if (fonts) {
+          fonts.ready.then(this.forceUpdate)
+        } else {
+          setTimeout(this.forceUpdate)
+        }
+        if (window.ResizeObserver && current && current.target) {
+          this.resizeObserver = new ResizeObserver(this.forceUpdate)
+          if (this.resizeObserver) {
+            this.resizeObserver.observe(current.target, { box: 'border-box' })
+          }
+        } else {
+          window.addEventListener('resize', this.onResize)
+        }
       }
 
       componentWillUnmount () {
-        window.removeEventListener('resize', this.onResize)
-        this.onResize.cancel()
+        if (window.ResizeObserver) {
+          if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+          }
+        } else {
+          window.removeEventListener('resize', this.onResize)
+          this.onResize.cancel()
+        }
       }
 
-      onResize () {
+      forceUpdate() {
         this.setState({
-          winWidth: window.innerWidth
+          winWidth: window.innerWidth + Math.random() / 1000,
         })
       }
 
       render () {
         const {innerRef, ...rest} = this.props
-        return <Component ref={innerRef} {...rest} {...this.state} />
+        return <Component ref={this.innerRef} {...rest} {...this.state} />
       }
     }
 

From 0abda9990d8b13f8601285139ea5a7a28884a76b Mon Sep 17 00:00:00 2001
From: Nicolas Ramirez <ramirezcgn@gmail.com>
Date: Fri, 23 Apr 2021 17:41:33 -0300
Subject: [PATCH 2/8] build

---
 lib/helpers.js       |  2 +-
 lib/html.js          | 15 ++++--------
 lib/index.js         | 15 ++++--------
 lib/loose.js         |  2 +-
 lib/responsiveHOC.js | 56 ++++++++++++++++++++++++++++++++------------
 5 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/lib/helpers.js b/lib/helpers.js
index aadcefd..8f33955 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function omit(obj, omittedKeys) {
   if (!obj || _typeof(obj) !== 'object') {
diff --git a/lib/html.js b/lib/html.js
index 7a02365..7d39a32 100644
--- a/lib/html.js
+++ b/lib/html.js
@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -49,7 +49,7 @@ function hookNode(node, basedOn) {
 
     switch (basedOn) {
       case 'words':
-        units = node.textContent.split(/\b|(?=\W)/);
+        units = node.textContent.match(/[^\s]+|\s/g);
         break;
 
       case 'letters':
@@ -128,9 +128,7 @@ var usedProps = Object.keys(defaultProps);
  * props.className {String}
  */
 
-var HTMLEllipsis =
-/*#__PURE__*/
-function (_React$Component) {
+var HTMLEllipsis = /*#__PURE__*/function (_React$Component) {
   _inherits(HTMLEllipsis, _React$Component);
 
   function HTMLEllipsis(props) {
@@ -146,6 +144,7 @@ function (_React$Component) {
     _this.canvas = null;
     _this.maxLine = 0;
     _this.nlUnits = [];
+    _this.target = React.createRef();
     return _this;
   }
 
@@ -294,8 +293,6 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
-
       var _this$state = this.state,
           html = _this$state.html,
           clamped = _this$state.clamped;
@@ -308,9 +305,7 @@ function (_React$Component) {
 
       return React.createElement(Component, _extends({
         className: "LinesEllipsis ".concat(clamped ? 'LinesEllipsis--clamped' : '', " ").concat(className),
-        ref: function ref(node) {
-          return _this3.target = node;
-        }
+        ref: this.target
       }, omit(rest, usedProps)), React.createElement("div", {
         dangerouslySetInnerHTML: {
           __html: clamped ? html : unsafeHTML
diff --git a/lib/index.js b/lib/index.js
index 0a29df0..164939c 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -68,9 +68,7 @@ var usedProps = Object.keys(defaultProps);
  * props.className {String}
  */
 
-var LinesEllipsis =
-/*#__PURE__*/
-function (_React$Component) {
+var LinesEllipsis = /*#__PURE__*/function (_React$Component) {
   _inherits(LinesEllipsis, _React$Component);
 
   function LinesEllipsis(props) {
@@ -86,6 +84,7 @@ function (_React$Component) {
     _this.units = [];
     _this.maxLine = 0;
     _this.canvas = null;
+    _this.target = React.createRef();
     return _this;
   }
 
@@ -151,7 +150,7 @@ function (_React$Component) {
 
       switch (basedOn) {
         case 'words':
-          this.units = props.text.split(/\b|(?=\W)/);
+          this.units = props.text.match(/[^\s]+|\s/g);
           break;
 
         case 'letters':
@@ -231,8 +230,6 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
-
       var _this$state = this.state,
           text = _this$state.text,
           clamped = _this$state.clamped;
@@ -246,9 +243,7 @@ function (_React$Component) {
 
       return React.createElement(Component, _extends({
         className: "LinesEllipsis ".concat(clamped ? 'LinesEllipsis--clamped' : '', " ").concat(className),
-        ref: function ref(node) {
-          return _this3.target = node;
-        }
+        ref: this.target
       }, omit(rest, usedProps)), clamped && trimRight ? text.replace(/[\s\uFEFF\xA0]+$/, '') : text, React.createElement("wbr", null), clamped && React.createElement("span", {
         className: "LinesEllipsis-ellipsis"
       }, ellipsis));
diff --git a/lib/loose.js b/lib/loose.js
index 255d03e..68956c8 100644
--- a/lib/loose.js
+++ b/lib/loose.js
@@ -2,7 +2,7 @@
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
diff --git a/lib/responsiveHOC.js b/lib/responsiveHOC.js
index e24d4c0..1ad99dd 100644
--- a/lib/responsiveHOC.js
+++ b/lib/responsiveHOC.js
@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -28,15 +28,11 @@ var React = require('react');
 
 var debounce = require('lodash/debounce');
 
-var isBrowser = typeof window !== 'undefined';
-
 function responsiveHOC() {
   var wait = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 150;
   var debounceOptions = arguments.length > 1 ? arguments[1] : undefined;
   return function (Component) {
-    var Responsive =
-    /*#__PURE__*/
-    function (_React$Component) {
+    var Responsive = /*#__PURE__*/function (_React$Component) {
       _inherits(Responsive, _React$Component);
 
       function Responsive(props) {
@@ -45,29 +41,59 @@ function responsiveHOC() {
         _classCallCheck(this, Responsive);
 
         _this = _possibleConstructorReturn(this, _getPrototypeOf(Responsive).call(this, props));
+        var innerRef = props.innerRef;
+        _this.innerRef = innerRef || React.createRef();
         _this.state = {
-          winWidth: isBrowser ? window.innerWidth : 0
+          winWidth: window.innerWidth
         };
-        _this.onResize = debounce(_this.onResize.bind(_assertThisInitialized(_this)), wait, debounceOptions);
+        _this.forceUpdate = _this.forceUpdate.bind(_assertThisInitialized(_this));
+        _this.onResize = debounce(_this.forceUpdate, wait, debounceOptions);
+        _this.resizeObserver = null;
         return _this;
       }
 
       _createClass(Responsive, [{
         key: "componentDidMount",
         value: function componentDidMount() {
-          window.addEventListener('resize', this.onResize);
+          var current = this.innerRef.current;
+          var _document = document,
+              fonts = _document.fonts;
+
+          if (fonts) {
+            fonts.ready.then(this.forceUpdate);
+          } else {
+            setTimeout(this.forceUpdate);
+          }
+
+          if (window.ResizeObserver && current && current.target) {
+            this.resizeObserver = new ResizeObserver(this.forceUpdate);
+
+            if (this.resizeObserver) {
+              this.resizeObserver.observe(current.target, {
+                box: 'border-box'
+              });
+            }
+          } else {
+            window.addEventListener('resize', this.onResize);
+          }
         }
       }, {
         key: "componentWillUnmount",
         value: function componentWillUnmount() {
-          window.removeEventListener('resize', this.onResize);
-          this.onResize.cancel();
+          if (window.ResizeObserver) {
+            if (this.resizeObserver) {
+              this.resizeObserver.disconnect();
+            }
+          } else {
+            window.removeEventListener('resize', this.onResize);
+            this.onResize.cancel();
+          }
         }
       }, {
-        key: "onResize",
-        value: function onResize() {
+        key: "forceUpdate",
+        value: function forceUpdate() {
           this.setState({
-            winWidth: window.innerWidth
+            winWidth: window.innerWidth + Math.random() / 1000
           });
         }
       }, {
@@ -78,7 +104,7 @@ function responsiveHOC() {
               rest = _objectWithoutProperties(_this$props, ["innerRef"]);
 
           return React.createElement(Component, _extends({
-            ref: innerRef
+            ref: this.innerRef
           }, rest, this.state));
         }
       }]);

From fe36802443fea2c1b1f0be96c9a0c02b28067bf5 Mon Sep 17 00:00:00 2001
From: Nicolas Ramirez <ramirezcgn@gmail.com>
Date: Fri, 23 Apr 2021 18:47:44 -0300
Subject: [PATCH 3/8] fix build on windows

---
 lib/common.js        | 3 +--
 lib/helpers.js       | 5 ++---
 lib/html.js          | 9 +++++----
 lib/index.js         | 9 +++++----
 lib/loose.js         | 5 ++---
 lib/responsiveHOC.js | 9 +++++----
 package.json         | 7 +++++--
 7 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/lib/common.js b/lib/common.js
index 6fec8ec..9822992 100644
--- a/lib/common.js
+++ b/lib/common.js
@@ -12,5 +12,4 @@ module.exports = {
     border: 'none'
   },
   mirrorProps: ['box-sizing', 'width', 'font-size', 'font-weight', 'font-family', 'font-style', 'letter-spacing', 'text-indent', 'white-space', 'word-break', 'overflow-wrap', 'padding-left', 'padding-right']
-};
-
+};
\ No newline at end of file
diff --git a/lib/helpers.js b/lib/helpers.js
index 8f33955..61ddc97 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function omit(obj, omittedKeys) {
   if (!obj || _typeof(obj) !== 'object') {
@@ -20,5 +20,4 @@ function omit(obj, omittedKeys) {
 
 module.exports = {
   omit: omit
-};
-
+};
\ No newline at end of file
diff --git a/lib/html.js b/lib/html.js
index 7d39a32..7b5aaa4 100644
--- a/lib/html.js
+++ b/lib/html.js
@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -128,7 +128,9 @@ var usedProps = Object.keys(defaultProps);
  * props.className {String}
  */
 
-var HTMLEllipsis = /*#__PURE__*/function (_React$Component) {
+var HTMLEllipsis =
+/*#__PURE__*/
+function (_React$Component) {
   _inherits(HTMLEllipsis, _React$Component);
 
   function HTMLEllipsis(props) {
@@ -318,5 +320,4 @@ var HTMLEllipsis = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 HTMLEllipsis.defaultProps = defaultProps;
-module.exports = HTMLEllipsis;
-
+module.exports = HTMLEllipsis;
\ No newline at end of file
diff --git a/lib/index.js b/lib/index.js
index 164939c..3184b06 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -68,7 +68,9 @@ var usedProps = Object.keys(defaultProps);
  * props.className {String}
  */
 
-var LinesEllipsis = /*#__PURE__*/function (_React$Component) {
+var LinesEllipsis =
+/*#__PURE__*/
+function (_React$Component) {
   _inherits(LinesEllipsis, _React$Component);
 
   function LinesEllipsis(props) {
@@ -254,5 +256,4 @@ var LinesEllipsis = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 LinesEllipsis.defaultProps = defaultProps;
-module.exports = LinesEllipsis;
-
+module.exports = LinesEllipsis;
\ No newline at end of file
diff --git a/lib/loose.js b/lib/loose.js
index 68956c8..f350a94 100644
--- a/lib/loose.js
+++ b/lib/loose.js
@@ -2,7 +2,7 @@
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -50,5 +50,4 @@ LinesEllipsisLoose.defaultProps = {
   style: {},
   overflowFallback: true
 };
-module.exports = LinesEllipsisLoose;
-
+module.exports = LinesEllipsisLoose;
\ No newline at end of file
diff --git a/lib/responsiveHOC.js b/lib/responsiveHOC.js
index 1ad99dd..dbc3a29 100644
--- a/lib/responsiveHOC.js
+++ b/lib/responsiveHOC.js
@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -32,7 +32,9 @@ function responsiveHOC() {
   var wait = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 150;
   var debounceOptions = arguments.length > 1 ? arguments[1] : undefined;
   return function (Component) {
-    var Responsive = /*#__PURE__*/function (_React$Component) {
+    var Responsive =
+    /*#__PURE__*/
+    function (_React$Component) {
       _inherits(Responsive, _React$Component);
 
       function Responsive(props) {
@@ -120,5 +122,4 @@ function responsiveHOC() {
   };
 }
 
-module.exports = responsiveHOC;
-
+module.exports = responsiveHOC;
\ No newline at end of file
diff --git a/package.json b/package.json
index c97539c..9f041b1 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,8 @@
   "scripts": {
     "test": "standard && jest",
     "lint:fix": "standard --fix",
-    "prebuild": "mkdir -p lib",
-    "build": "for js in src/*.js; do babel $js > \"lib/$(basename $js)\"; done",
+    "prebuild": "mkdirp lib",
+    "build": "babel src --out-dir lib",
     "docs": "browserify -e docs/app.js --transform-key=docs | uglifyjs -m -b max_line_len=800,beautify=false > docs/app.bundle.js",
     "docs:watch": "watchify -e docs/app.js --transform-key=docs -o docs/app.bundle.js",
     "prepare": "npm run build"
@@ -77,5 +77,8 @@
     "aliases": {
       "react": "preact"
     }
+  },
+  "dependencies": {
+    "mkdirp": "^0.5.5"
   }
 }

From 9900e3a50e10cbda7ee00eac484f86c706a3e7e3 Mon Sep 17 00:00:00 2001
From: Nicolas Ramirez <ramirezcgn@gmail.com>
Date: Fri, 23 Apr 2021 19:58:53 -0300
Subject: [PATCH 4/8] fix ref current

---
 src/html.js  | 2 +-
 src/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/html.js b/src/html.js
index 5ed4d3e..c29ee97 100644
--- a/src/html.js
+++ b/src/html.js
@@ -137,7 +137,7 @@ class HTMLEllipsis extends React.Component {
   }
 
   copyStyleToCanvas () {
-    const targetStyle = window.getComputedStyle(this.target)
+    const targetStyle = window.getComputedStyle(this.target.current)
     mirrorProps.forEach((key) => {
       this.canvas.style[key] = targetStyle[key]
     })
diff --git a/src/index.js b/src/index.js
index f21afbd..501f10e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -80,7 +80,7 @@ class LinesEllipsis extends React.Component {
   }
 
   copyStyleToCanvas () {
-    const targetStyle = window.getComputedStyle(this.target)
+    const targetStyle = window.getComputedStyle(this.target.current)
     mirrorProps.forEach((key) => {
       this.canvas.style[key] = targetStyle[key]
     })

From 1ab4ec9a186d546b7a339c042b55a0ea5c5d591e Mon Sep 17 00:00:00 2001
From: Nicolas Ramirez <ramirezcgn@gmail.com>
Date: Sat, 24 Apr 2021 18:35:40 -0300
Subject: [PATCH 5/8] export other objects

---
 package.json | 4 +---
 src/index.js | 5 +++++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 9f041b1..666c6d7 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "enzyme-adapter-react-16": "^1.10",
     "jest": "^24.1.0",
     "jest-enzyme": "^7.0.1",
+    "mkdirp": "^0.5.5",
     "lodash": "^4.17.11",
     "preact": "^8.4.2",
     "raf": "^3.4.1",
@@ -77,8 +78,5 @@
     "aliases": {
       "react": "preact"
     }
-  },
-  "dependencies": {
-    "mkdirp": "^0.5.5"
   }
 }
diff --git a/src/index.js b/src/index.js
index 501f10e..1baf3da 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,8 @@
 const React = require('react')
 const {canvasStyle, mirrorProps} = require('./common')
 const {omit} = require('./helpers')
+const responsiveHOC = require('./responsiveHOC')
+const HTMLEllipsis = require('./html')
 
 function prevSibling (node, count) {
   while (node && count--) {
@@ -188,3 +190,6 @@ class LinesEllipsis extends React.Component {
 LinesEllipsis.defaultProps = defaultProps
 
 module.exports = LinesEllipsis
+module.exports.LinesEllipsis = LinesEllipsis
+module.exports.HTMLEllipsis = HTMLEllipsis
+module.exports.responsiveHOC = responsiveHOC

From b8143278f908d7d81a029f48cb74d9ceca9b91f9 Mon Sep 17 00:00:00 2001
From: Nicolas Ramirez <ramirezcgn@gmail.com>
Date: Wed, 28 Apr 2021 12:07:13 -0300
Subject: [PATCH 6/8] fix issue with empty string

---
 lib/html.js  |  4 ++--
 lib/index.js | 13 ++++++++++---
 src/html.js  |  2 +-
 src/index.js |  2 +-
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/lib/html.js b/lib/html.js
index 7b5aaa4..f62732a 100644
--- a/lib/html.js
+++ b/lib/html.js
@@ -49,7 +49,7 @@ function hookNode(node, basedOn) {
 
     switch (basedOn) {
       case 'words':
-        units = node.textContent.match(/[^\s]+|\s/g);
+        units = node.textContent.match(/[^\s]+|\s/g) || [];
         break;
 
       case 'letters':
@@ -199,7 +199,7 @@ function (_React$Component) {
     value: function copyStyleToCanvas() {
       var _this2 = this;
 
-      var targetStyle = window.getComputedStyle(this.target);
+      var targetStyle = window.getComputedStyle(this.target.current);
       mirrorProps.forEach(function (key) {
         _this2.canvas.style[key] = targetStyle[key];
       });
diff --git a/lib/index.js b/lib/index.js
index 3184b06..c7862ed 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -37,6 +37,10 @@ var _require = require('./common'),
 var _require2 = require('./helpers'),
     omit = _require2.omit;
 
+var responsiveHOC = require('./responsiveHOC');
+
+var HTMLEllipsis = require('./html');
+
 function prevSibling(node, count) {
   while (node && count--) {
     node = node.previousElementSibling;
@@ -139,7 +143,7 @@ function (_React$Component) {
     value: function copyStyleToCanvas() {
       var _this2 = this;
 
-      var targetStyle = window.getComputedStyle(this.target);
+      var targetStyle = window.getComputedStyle(this.target.current);
       mirrorProps.forEach(function (key) {
         _this2.canvas.style[key] = targetStyle[key];
       });
@@ -152,7 +156,7 @@ function (_React$Component) {
 
       switch (basedOn) {
         case 'words':
-          this.units = props.text.match(/[^\s]+|\s/g);
+          this.units = props.text.match(/[^\s]+|\s/g) || [];
           break;
 
         case 'letters':
@@ -256,4 +260,7 @@ function (_React$Component) {
 }(React.Component);
 
 LinesEllipsis.defaultProps = defaultProps;
-module.exports = LinesEllipsis;
\ No newline at end of file
+module.exports = LinesEllipsis;
+module.exports.LinesEllipsis = LinesEllipsis;
+module.exports.HTMLEllipsis = HTMLEllipsis;
+module.exports.responsiveHOC = responsiveHOC;
\ No newline at end of file
diff --git a/src/html.js b/src/html.js
index c29ee97..a92ba9e 100644
--- a/src/html.js
+++ b/src/html.js
@@ -12,7 +12,7 @@ function hookNode (node, basedOn) {
     let units
     switch (basedOn) {
       case 'words':
-        units = node.textContent.match(/[^\s]+|\s/g)
+        units = node.textContent.match(/[^\s]+|\s/g) || []
         break
       case 'letters':
         units = Array.from(node.textContent)
diff --git a/src/index.js b/src/index.js
index 1baf3da..24f2211 100644
--- a/src/index.js
+++ b/src/index.js
@@ -93,7 +93,7 @@ class LinesEllipsis extends React.Component {
     const basedOn = props.basedOn || (/^[\x00-\x7F]+$/.test(props.text) ? 'words' : 'letters')
     switch (basedOn) {
       case 'words':
-        this.units = props.text.match(/[^\s]+|\s/g)
+        this.units = props.text.match(/[^\s]+|\s/g) || []
         break
       case 'letters':
         this.units = Array.from(props.text)

From f9dcce55e8b42597c571ad9234456802468e5508 Mon Sep 17 00:00:00 2001
From: Nicolas Ramirez <ramirezcgn@gmail.com>
Date: Wed, 5 May 2021 20:04:26 -0300
Subject: [PATCH 7/8] Fix ref issues

---
 lib/html.js          |  8 +++++---
 lib/index.js         | 13 +++++++++----
 lib/responsiveHOC.js | 14 +++++++++-----
 src/html.js          |  8 +++++---
 src/index.js         | 10 +++++++---
 src/responsiveHOC.js | 13 ++++++++-----
 6 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/lib/html.js b/lib/html.js
index f62732a..ca103fe 100644
--- a/lib/html.js
+++ b/lib/html.js
@@ -116,6 +116,7 @@ var defaultProps = {
   className: '',
   basedOn: undefined,
   onReflow: function onReflow() {},
+  innerRef: undefined,
   winWidth: undefined // for the HOC
 
 };
@@ -139,6 +140,7 @@ function (_React$Component) {
     _classCallCheck(this, HTMLEllipsis);
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(HTMLEllipsis).call(this, props));
+    var innerRef = props.innerRef;
     _this.state = {
       html: props.unsafeHTML,
       clamped: false
@@ -146,7 +148,7 @@ function (_React$Component) {
     _this.canvas = null;
     _this.maxLine = 0;
     _this.nlUnits = [];
-    _this.target = React.createRef();
+    _this.innerRef = innerRef || React.createRef();
     return _this;
   }
 
@@ -199,7 +201,7 @@ function (_React$Component) {
     value: function copyStyleToCanvas() {
       var _this2 = this;
 
-      var targetStyle = window.getComputedStyle(this.target.current);
+      var targetStyle = window.getComputedStyle(this.innerRef.current);
       mirrorProps.forEach(function (key) {
         _this2.canvas.style[key] = targetStyle[key];
       });
@@ -307,7 +309,7 @@ function (_React$Component) {
 
       return React.createElement(Component, _extends({
         className: "LinesEllipsis ".concat(clamped ? 'LinesEllipsis--clamped' : '', " ").concat(className),
-        ref: this.target
+        ref: this.innerRef
       }, omit(rest, usedProps)), React.createElement("div", {
         dangerouslySetInnerHTML: {
           __html: clamped ? html : unsafeHTML
diff --git a/lib/index.js b/lib/index.js
index c7862ed..b28ad04 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -41,6 +41,8 @@ var responsiveHOC = require('./responsiveHOC');
 
 var HTMLEllipsis = require('./html');
 
+var LinesEllipsisLoose = require('./loose');
+
 function prevSibling(node, count) {
   while (node && count--) {
     node = node.previousElementSibling;
@@ -59,6 +61,7 @@ var defaultProps = {
   onReflow: function onReflow() {},
   text: '',
   trimRight: true,
+  innerRef: undefined,
   winWidth: undefined // for the HOC
 
 };
@@ -83,6 +86,7 @@ function (_React$Component) {
     _classCallCheck(this, LinesEllipsis);
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(LinesEllipsis).call(this, props));
+    var innerRef = props.innerRef;
     _this.state = {
       text: props.text,
       clamped: false
@@ -90,7 +94,7 @@ function (_React$Component) {
     _this.units = [];
     _this.maxLine = 0;
     _this.canvas = null;
-    _this.target = React.createRef();
+    _this.innerRef = innerRef || React.createRef();
     return _this;
   }
 
@@ -143,7 +147,7 @@ function (_React$Component) {
     value: function copyStyleToCanvas() {
       var _this2 = this;
 
-      var targetStyle = window.getComputedStyle(this.target.current);
+      var targetStyle = window.getComputedStyle(this.innerRef.current);
       mirrorProps.forEach(function (key) {
         _this2.canvas.style[key] = targetStyle[key];
       });
@@ -249,7 +253,7 @@ function (_React$Component) {
 
       return React.createElement(Component, _extends({
         className: "LinesEllipsis ".concat(clamped ? 'LinesEllipsis--clamped' : '', " ").concat(className),
-        ref: this.target
+        ref: this.innerRef
       }, omit(rest, usedProps)), clamped && trimRight ? text.replace(/[\s\uFEFF\xA0]+$/, '') : text, React.createElement("wbr", null), clamped && React.createElement("span", {
         className: "LinesEllipsis-ellipsis"
       }, ellipsis));
@@ -263,4 +267,5 @@ LinesEllipsis.defaultProps = defaultProps;
 module.exports = LinesEllipsis;
 module.exports.LinesEllipsis = LinesEllipsis;
 module.exports.HTMLEllipsis = HTMLEllipsis;
-module.exports.responsiveHOC = responsiveHOC;
\ No newline at end of file
+module.exports.responsiveHOC = responsiveHOC;
+module.exports.LinesEllipsisLoose = LinesEllipsisLoose;
\ No newline at end of file
diff --git a/lib/responsiveHOC.js b/lib/responsiveHOC.js
index dbc3a29..fa5ba98 100644
--- a/lib/responsiveHOC.js
+++ b/lib/responsiveHOC.js
@@ -44,10 +44,10 @@ function responsiveHOC() {
 
         _this = _possibleConstructorReturn(this, _getPrototypeOf(Responsive).call(this, props));
         var innerRef = props.innerRef;
-        _this.innerRef = innerRef || React.createRef();
         _this.state = {
           winWidth: window.innerWidth
         };
+        _this.innerRef = innerRef || React.createRef();
         _this.forceUpdate = _this.forceUpdate.bind(_assertThisInitialized(_this));
         _this.onResize = debounce(_this.forceUpdate, wait, debounceOptions);
         _this.resizeObserver = null;
@@ -67,11 +67,11 @@ function responsiveHOC() {
             setTimeout(this.forceUpdate);
           }
 
-          if (window.ResizeObserver && current && current.target) {
+          if (window.ResizeObserver && current) {
             this.resizeObserver = new ResizeObserver(this.forceUpdate);
 
             if (this.resizeObserver) {
-              this.resizeObserver.observe(current.target, {
+              this.resizeObserver.observe(current, {
                 box: 'border-box'
               });
             }
@@ -106,7 +106,7 @@ function responsiveHOC() {
               rest = _objectWithoutProperties(_this$props, ["innerRef"]);
 
           return React.createElement(Component, _extends({
-            ref: this.innerRef
+            innerRef: this.innerRef
           }, rest, this.state));
         }
       }]);
@@ -118,7 +118,11 @@ function responsiveHOC() {
     Responsive.defaultProps = {
       innerRef: function innerRef() {}
     };
-    return Responsive;
+    return React.forwardRef(function (props, ref) {
+      return React.createElement(Responsive, _extends({
+        innerRef: ref
+      }, props));
+    });
   };
 }
 
diff --git a/src/html.js b/src/html.js
index a92ba9e..f919adc 100644
--- a/src/html.js
+++ b/src/html.js
@@ -75,6 +75,7 @@ const defaultProps = {
   className: '',
   basedOn: undefined,
   onReflow () {},
+  innerRef: undefined,
   winWidth: undefined // for the HOC
 }
 const usedProps = Object.keys(defaultProps)
@@ -89,6 +90,7 @@ const usedProps = Object.keys(defaultProps)
 class HTMLEllipsis extends React.Component {
   constructor (props) {
     super(props)
+    const {innerRef} = props
     this.state = {
       html: props.unsafeHTML,
       clamped: false
@@ -96,7 +98,7 @@ class HTMLEllipsis extends React.Component {
     this.canvas = null
     this.maxLine = 0
     this.nlUnits = []
-    this.target = React.createRef()
+    this.innerRef = innerRef || React.createRef()
   }
 
   componentDidMount () {
@@ -137,7 +139,7 @@ class HTMLEllipsis extends React.Component {
   }
 
   copyStyleToCanvas () {
-    const targetStyle = window.getComputedStyle(this.target.current)
+    const targetStyle = window.getComputedStyle(this.innerRef.current)
     mirrorProps.forEach((key) => {
       this.canvas.style[key] = targetStyle[key]
     })
@@ -231,7 +233,7 @@ class HTMLEllipsis extends React.Component {
     return (
       <Component
         className={`LinesEllipsis ${clamped ? 'LinesEllipsis--clamped' : ''} ${className}`}
-        ref={this.target}
+        ref={this.innerRef}
         {...omit(rest, usedProps)}
       >
         <div dangerouslySetInnerHTML={{__html: clamped ? html : unsafeHTML}} />
diff --git a/src/index.js b/src/index.js
index 24f2211..56bee30 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,7 @@ const {canvasStyle, mirrorProps} = require('./common')
 const {omit} = require('./helpers')
 const responsiveHOC = require('./responsiveHOC')
 const HTMLEllipsis = require('./html')
+const LinesEllipsisLoose = require('./loose')
 
 function prevSibling (node, count) {
   while (node && count--) {
@@ -20,6 +21,7 @@ const defaultProps = {
   onReflow () {},
   text: '',
   trimRight: true,
+  innerRef: undefined,
   winWidth: undefined // for the HOC
 }
 const usedProps = Object.keys(defaultProps)
@@ -34,6 +36,7 @@ const usedProps = Object.keys(defaultProps)
 class LinesEllipsis extends React.Component {
   constructor (props) {
     super(props)
+    const {innerRef} = props
     this.state = {
       text: props.text,
       clamped: false
@@ -41,7 +44,7 @@ class LinesEllipsis extends React.Component {
     this.units = []
     this.maxLine = 0
     this.canvas = null
-    this.target = React.createRef()
+    this.innerRef = innerRef || React.createRef()
   }
 
   componentDidMount () {
@@ -82,7 +85,7 @@ class LinesEllipsis extends React.Component {
   }
 
   copyStyleToCanvas () {
-    const targetStyle = window.getComputedStyle(this.target.current)
+    const targetStyle = window.getComputedStyle(this.innerRef.current)
     mirrorProps.forEach((key) => {
       this.canvas.style[key] = targetStyle[key]
     })
@@ -171,7 +174,7 @@ class LinesEllipsis extends React.Component {
     return (
       <Component
         className={`LinesEllipsis ${clamped ? 'LinesEllipsis--clamped' : ''} ${className}`}
-        ref={this.target}
+        ref={this.innerRef}
         {...omit(rest, usedProps)}
       >
         {clamped && trimRight
@@ -193,3 +196,4 @@ module.exports = LinesEllipsis
 module.exports.LinesEllipsis = LinesEllipsis
 module.exports.HTMLEllipsis = HTMLEllipsis
 module.exports.responsiveHOC = responsiveHOC
+module.exports.LinesEllipsisLoose = LinesEllipsisLoose
\ No newline at end of file
diff --git a/src/responsiveHOC.js b/src/responsiveHOC.js
index 21139d2..9c3c6d5 100644
--- a/src/responsiveHOC.js
+++ b/src/responsiveHOC.js
@@ -7,10 +7,10 @@ function responsiveHOC (wait = 150, debounceOptions) {
       constructor (props) {
         super(props)
         const {innerRef} = props
-        this.innerRef = innerRef || React.createRef()
         this.state = {
           winWidth: window.innerWidth
         }
+        this.innerRef = innerRef || React.createRef()
         this.forceUpdate = this.forceUpdate.bind(this)
         this.onResize = debounce(this.forceUpdate, wait, debounceOptions)
         this.resizeObserver = null
@@ -24,10 +24,10 @@ function responsiveHOC (wait = 150, debounceOptions) {
         } else {
           setTimeout(this.forceUpdate)
         }
-        if (window.ResizeObserver && current && current.target) {
+        if (window.ResizeObserver && current) {
           this.resizeObserver = new ResizeObserver(this.forceUpdate)
           if (this.resizeObserver) {
-            this.resizeObserver.observe(current.target, { box: 'border-box' })
+            this.resizeObserver.observe(current, { box: 'border-box' })
           }
         } else {
           window.addEventListener('resize', this.onResize)
@@ -53,7 +53,7 @@ function responsiveHOC (wait = 150, debounceOptions) {
 
       render () {
         const {innerRef, ...rest} = this.props
-        return <Component ref={this.innerRef} {...rest} {...this.state} />
+        return <Component innerRef={this.innerRef} {...rest} {...this.state} />
       }
     }
 
@@ -61,7 +61,10 @@ function responsiveHOC (wait = 150, debounceOptions) {
     Responsive.defaultProps = {
       innerRef () {}
     }
-    return Responsive
+
+    return React.forwardRef((props, ref) => (
+      <Responsive innerRef={ref} {...props}/>
+    ))
   }
 }
 

From 696a7432382f796f7d26db15299ae865bd299edf Mon Sep 17 00:00:00 2001
From: Nicolas Ramirez <ramirezcgn@gmail.com>
Date: Fri, 7 May 2021 14:42:09 -0300
Subject: [PATCH 8/8] Lint and test fixes

---
 package.json                           | 5 ++++-
 src/index.js                           | 2 +-
 src/responsiveHOC.js                   | 6 +++---
 tests/components/responsiveHOC.spec.js | 4 +++-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 666c6d7..2ced3d7 100644
--- a/package.json
+++ b/package.json
@@ -46,8 +46,8 @@
     "enzyme-adapter-react-16": "^1.10",
     "jest": "^24.1.0",
     "jest-enzyme": "^7.0.1",
-    "mkdirp": "^0.5.5",
     "lodash": "^4.17.11",
+    "mkdirp": "^0.5.5",
     "preact": "^8.4.2",
     "raf": "^3.4.1",
     "react": "^16.8.3",
@@ -57,6 +57,9 @@
     "watchify": "^3.11.1"
   },
   "standard": {
+    "globals": [
+      "ResizeObserver"
+    ],
     "ignore": [
       "lib",
       "docs/*.bundle.js"
diff --git a/src/index.js b/src/index.js
index 56bee30..b9f71c7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -196,4 +196,4 @@ module.exports = LinesEllipsis
 module.exports.LinesEllipsis = LinesEllipsis
 module.exports.HTMLEllipsis = HTMLEllipsis
 module.exports.responsiveHOC = responsiveHOC
-module.exports.LinesEllipsisLoose = LinesEllipsisLoose
\ No newline at end of file
+module.exports.LinesEllipsisLoose = LinesEllipsisLoose
diff --git a/src/responsiveHOC.js b/src/responsiveHOC.js
index 9c3c6d5..0edcba7 100644
--- a/src/responsiveHOC.js
+++ b/src/responsiveHOC.js
@@ -45,9 +45,9 @@ function responsiveHOC (wait = 150, debounceOptions) {
         }
       }
 
-      forceUpdate() {
+      forceUpdate () {
         this.setState({
-          winWidth: window.innerWidth + Math.random() / 1000,
+          winWidth: window.innerWidth + Math.random() / 1000
         })
       }
 
@@ -63,7 +63,7 @@ function responsiveHOC (wait = 150, debounceOptions) {
     }
 
     return React.forwardRef((props, ref) => (
-      <Responsive innerRef={ref} {...props}/>
+      <Responsive innerRef={ref} {...props} />
     ))
   }
 }
diff --git a/tests/components/responsiveHOC.spec.js b/tests/components/responsiveHOC.spec.js
index 4dcf7ad..ba5bd64 100644
--- a/tests/components/responsiveHOC.spec.js
+++ b/tests/components/responsiveHOC.spec.js
@@ -11,6 +11,7 @@ describe('responsiveHOC', () => {
   const ResponsiveEllipsis = responsiveHOC()(LinesEllipsis)
   let props
   let responsiveEllipsis
+  let lineEllipsis
 
   beforeEach(() => {
     props = {
@@ -20,6 +21,7 @@ describe('responsiveHOC', () => {
     responsiveEllipsis = mount(
       <ResponsiveEllipsis {...props} />
     )
+    lineEllipsis = responsiveEllipsis.childAt(0).instance()
   })
 
   it('mounted', () => {
@@ -31,6 +33,6 @@ describe('responsiveHOC', () => {
   it('fires `onResize` on resize', () => {
     window.innerWidth = 1234
     window.dispatchEvent(new Event('resize')) // eslint-disable-line no-undef
-    expect(responsiveEllipsis.state('winWidth')).toBe(1234)
+    expect(Math.floor(lineEllipsis.state.winWidth)).toBe(1234)
   })
 })