feat(methods): add resize (#29)

* feat(methods): add resize

* chore(dependencies): audit yarn lock file

* fix(dependencies): updates

* ci(node js): update to 10

* build(dependency): update rollup

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - 9
+  - 10
 cache:
   directories:
     - node_modules

README.md

@@ -25,15 +25,15 @@ yarn add react-snuggle
 #### Usage:
 
 ```jsx
-import Snuggle from "react-snuggle";
+import Snuggle from 'react-snuggle'
 
 const List = () => (
   <Snuggle>
     <div>Item</div>
     <div>Item</div>
     ...
   </Snuggle>
-);
+)
 ```
 
 ### Options
@@ -45,6 +45,29 @@ const List = () => (
 | rowGap      | _Number_        | 10        |
 | columnWidth | _Number_        | 250       |
 
+### Methods
+
+**resize**
+Recalculate all spaces available and snuggle each element z its space, it is helpful for lazing loading, resize listeners, and loading images.
+
+Example:
+
+```jsx
+const Component = () => {
+  const snuggleRef = useRef()
+
+  const onLoad = () => {
+    snuggleRef.current.resize()
+  }
+
+  return (
+    <Snuggle ref={snuggleRef}>
+      <img src="example.jpg" onLoad={onLoad} />
+    </Snuggle>
+  )
+}
+```
+
 ### Todo
 
 - [ ] Span options (element fill two columns or more);

package.json

@@ -59,9 +59,9 @@
     "react": "^16.4.2",
     "react-docgen-typescript-loader": "^3.0.1",
     "react-dom": "^16.4.2",
-    "rollup": "0.66.4",
+    "rollup": "2.3.3",
     "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-typescript2": "^0.18.0",
+    "rollup-plugin-typescript2": "^0.27.0",
     "rollup-plugin-uglify-es": "^0.0.1",
     "scrollreveal": "^4.0.0",
     "semantic-release": "^15.13.3",

src/index.tsx

@@ -9,6 +9,7 @@ interface ISnuggle {
   item?: React.ReactElement<any>
   rowGap?: number
   uniqueid?: string
+  innerRef?: any
 }
 
 const blackListProps = ['rowGap', 'columnWidth', 'uniqueid']
@@ -35,6 +36,7 @@ class Snuggle extends React.PureComponent<ISnuggle> {
     super(props)
 
     this.gridId = `snuggle--${props.uniqueid || key()}`
+    props.innerRef.current = { resize: this.setValues }
   }
 
   componentDidMount() {
@@ -59,21 +61,19 @@ class Snuggle extends React.PureComponent<ISnuggle> {
       return null
     }
 
-    this.elements.forEach(
-      (item: HTMLElement): null => {
-        const itemRef: HTMLElement = item
+    this.elements.forEach((item: HTMLElement): null => {
+      const itemRef: HTMLElement = item
 
-        if (itemRef && itemRef.firstElementChild) {
-          const firstElement: Element = itemRef.firstElementChild
-          const itemHeight: number = firstElement.getBoundingClientRect().height
-          const rowSpan: number = Math.ceil((itemHeight + rowGap) / rowGap)
+      if (itemRef && itemRef.firstElementChild) {
+        const firstElement: Element = itemRef.firstElementChild
+        const itemHeight: number = firstElement.getBoundingClientRect().height
+        const rowSpan: number = Math.ceil((itemHeight + rowGap) / rowGap)
 
-          itemRef.style.gridRowEnd = `span ${rowSpan}`
-        }
-
-        return null
+        itemRef.style.gridRowEnd = `span ${rowSpan}`
       }
-    )
+
+      return null
+    })
 
     if (!this.reposition) {
       window.requestAnimationFrame(this.setValues)
@@ -85,15 +85,13 @@ class Snuggle extends React.PureComponent<ISnuggle> {
     if (this.grid) {
       const images = this.grid.getElementsByTagName('img')
 
-      Array.from(images).forEach(
-        (img: HTMLImageElement): void => {
-          const imageRef = img
+      Array.from(images).forEach((img: HTMLImageElement): void => {
+        const imageRef = img
 
-          imageRef.onload = () => {
-            this.setValues()
-          }
+        imageRef.onload = () => {
+          this.setValues()
         }
-      )
+      })
     }
   }
 
@@ -167,4 +165,6 @@ class Snuggle extends React.PureComponent<ISnuggle> {
   }
 }
 
-export default Snuggle
+export default React.forwardRef((props: ISnuggle, ref: any) => (
+  <Snuggle innerRef={ref} {...props} />
+))