fix(ref): checks if ref exists and also it passes the node dom (#31)

closes #30

README.md

@@ -57,7 +57,9 @@ const Component = () => {
   const snuggleRef = useRef()
 
   const onLoad = () => {
-    snuggleRef.current.resize()
+    if (snuggleRef.current) {
+      snuggleRef.current.resize()
+    }
   }
 
   return (

src/index.tsx

@@ -36,7 +36,6 @@ class Snuggle extends React.PureComponent<ISnuggle> {
     super(props)
 
     this.gridId = `snuggle--${props.uniqueid || key()}`
-    props.innerRef.current = { resize: this.setValues }
   }
 
   componentDidMount() {
@@ -113,6 +112,7 @@ class Snuggle extends React.PureComponent<ISnuggle> {
       children,
       item = React.createElement('div'),
       container = React.createElement('div'),
+      innerRef,
       ...compProps
     } = this.props
 
@@ -126,8 +126,13 @@ class Snuggle extends React.PureComponent<ISnuggle> {
       this.getRef(n)
     }
 
-    const refGrid = (n: HTMLElement): void => {
-      this.grid = n
+    const refGrid = (node: HTMLElement): void => {
+      this.grid = node
+
+      if (innerRef) {
+        innerRef.current = node
+        innerRef.current.resize = this.setValues
+      }
     }
 
     const renderChildren = React.Children.map(

stories/index.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef, useEffect } from 'react'
 import { storiesOf } from '@storybook/react'
 import { withKnobs, text, boolean, number } from '@storybook/addon-knobs'
 
@@ -15,7 +15,7 @@ import {
 storiesOf('Snuggle', module)
   .add('default', () => (
     <div className="wrap">
-      <Snuggle item={<div className="card" />}>{listElements()}</Snuggle>
+      <Snuggle>{listElements()}</Snuggle>
     </div>
   ))
 
@@ -33,6 +33,30 @@ storiesOf('Snuggle', module)
 
   .add('on update grid', () => <OnUpdateGrid />)
 
+const ResizeElements = () => {
+  const ref = useRef()
+
+  useEffect(() => {
+    const setResize = () => {
+      if (ref.current && ref.current.resize) {
+        ref.current.resize()
+      }
+    }
+
+    window.addEventListener('resize', setResize)
+
+    return () => {
+      window.removeEventListener('resize', setResize)
+    }
+  }, [])
+
+  return (
+    <div className="wrap">
+      <Snuggle ref={ref}>{listElements()}</Snuggle>
+    </div>
+  )
+}
+
 storiesOf('Options', module)
   .addDecorator(withKnobs)
 
@@ -88,6 +112,8 @@ storiesOf('Options', module)
     </div>
   ))
 
+  .add('on resize method', () => <ResizeElements />)
+
 storiesOf('Third party dependencies', module).add('with scroll reveal', () => (
   <RevealAnimation />
 ))