Update index.js

fix: add null check + lint

Author: alexandremoore-lmi

src/index.js

@@ -1,28 +1,27 @@
-import React, { useEffect, useRef, useState } from "react";
-import PropTypes from "prop-types";
-import * as clampy_ from "@clampy-js/clampy/dist/clampy.umd.js";
-import * as elementResizeDetectorMaker_ from "element-resize-detector";
+import React, { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import * as clampy_ from '@clampy-js/clampy/dist/clampy.umd.js'
+import * as elementResizeDetectorMaker_ from 'element-resize-detector'
 
 const elementResizeDetectorMaker =
-  elementResizeDetectorMaker_.default || elementResizeDetectorMaker_;
-const clampy = clampy_.default || clampy_;
+  elementResizeDetectorMaker_.default || elementResizeDetectorMaker_
+const clampy = clampy_.default || clampy_
 
 function Clampy(props) {
-  const [opacity, setOpacity] = useState(0);
-  let containerRef = useRef(null);
-  let initialContent;
+  const [opacity, setOpacity] = useState(0)
+  let containerRef = useRef(null)
+  let initialContent
   if (!initialContent) {
-    initialContent = props.children;
+    initialContent = props.children
   }
 
-  let resizeDetector = elementResizeDetectorMaker({ strategy: "scroll" });
+  let resizeDetector = elementResizeDetectorMaker({ strategy: 'scroll' })
 
   const onResize = () => {
-    truncate();
-  };
+    truncate()
+  }
 
   const truncate = () => {
-    setOpacity(0);
     const options = {
       clamp: props.clampSize,
       truncationChar: props.truncationChar,
@@ -31,51 +30,54 @@ function Clampy(props) {
       // however this can leads to unexpected results so we need to explicitely
       // disable it.
       useNativeClamp: false
-    };
+    }
 
-    if (initialContent) {
-      containerRef.current.innerHTML = initialContent;
+    if (initialContent && containerRef.current) {
+      containerRef.current.innerHTML = initialContent
     }
-    clampy.clamp(containerRef.current, options);
-    setOpacity(1);
-  };
+    if (containerRef.current) {
+      setOpacity(0)
+      clampy.clamp(containerRef.current, options)
+      setOpacity(1)
+    }
+  }
 
   useEffect(() => {
-    truncate();
+    truncate()
 
     resizeDetector.listenTo(containerRef.current, () => {
-      truncate();
-    });
+      truncate()
+    })
 
-    window.addEventListener("resize", onResize);
+    window.addEventListener('resize', onResize)
 
     return () => {
       //   cleanup
-      resizeDetector.removeAllListeners(containerRef.current);
-      window.removeEventListener("resize", onResize);
-    };
-  }, [initialContent, props, truncate, onResize, resizeDetector]);
+      resizeDetector.removeAllListeners(containerRef.current)
+      window.removeEventListener('resize', onResize)
+    }
+  }, [])
 
   return React.createElement(
-    "div",
+    'div',
     {
       ref: containerRef,
       style: { opacity: opacity }
     },
     props.children
-  );
+  )
 }
 
 Clampy.propTypes = {
   children: PropTypes.node,
   clampSize: PropTypes.string,
   truncationChar: PropTypes.string
-};
+}
 
 Clampy.defaultProps = {
-  clampSize: "auto", // Default clamp size based on available height
-  truncationChar: "…"
+  clampSize: 'auto', // Default clamp size based on available height
+  truncationChar: '…'
   // truncationHTML: ''
-};
+}
 
-export default Clampy;
+export default Clampy