fix(react): fix passing ref to wrapper not working properly (fix #409)

Grsmto · Nov 14, 2019 · 9f3a15c · 9f3a15c
1 parent 186bffa
commit 9f3a15c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/packages/simplebar-react/index.js b/packages/simplebar-react/index.js
@@ -37,8 +37,8 @@ const getOptions = function(obj) {
 const SimpleBar = React.forwardRef(
   ({ children, scrollableNodeProps = {}, ...otherProps }, ref) => {
     let instance;
-    const elRef = useRef({});
-    const scrollableNodeRef = useRef();
+    let scrollableNodeRef = useRef();
+    const elRef = useRef();
     const contentNodeRef = useRef();
     let options = {};
     let rest = {};
@@ -66,7 +66,7 @@ const SimpleBar = React.forwardRef(
     }
 
     useEffect(() => {
-      const scrollableNodeRef = scrollableNodeProps.ref || scrollableNodeRef;
+      scrollableNodeRef = scrollableNodeProps.ref || scrollableNodeRef;
 
       if (elRef.current) {
         instance = new SimpleBarJS(elRef.current, {
@@ -89,7 +89,7 @@ const SimpleBar = React.forwardRef(
         instance.unMount();
         instance = null;
       };
-    });
+    }, []);
 
     return (
       <div ref={elRef} data-simplebar {...rest}>

diff --git a/packages/simplebar/demo/Demo.js b/packages/simplebar/demo/Demo.js
@@ -24,7 +24,7 @@ const renderScrollbar = props => {
 
 const Demo = () => {
   const [isHidden, setHidden] = React.useState(true);
-  const scrollableElRef = React.createRef();
+  // const scrollableElRef = React.createRef();
 
   const handleShowClick = React.useCallback(() => {
     setHidden(false);
@@ -282,7 +282,7 @@ const Demo = () => {
             className="demo1"
             autoHide={false}
             data-simplebar-force-visible="x"
-            scrollableNodeProps={{ ref: scrollableElRef }}
+            // scrollableNodeProps={{ ref: scrollableElRef }}
           >
             {({ scrollableNodeRef, contentNodeRef }) => (
               <List
@@ -326,6 +326,28 @@ const Demo = () => {
           </div>
         </div>
       </section>
+      <section>
+        <div className="col">
+          <h2>SimpleBar-React + refs</h2>
+          <SimpleBarReact
+            className="demo1"
+            autoHide={false}
+            data-simplebar-force-visible="x"
+          >
+            {({ scrollableNodeRef, contentNodeRef }) => {
+              return (
+                <div ref={scrollableNodeRef}>
+                  <div ref={contentNodeRef}>
+                    {[...Array(50)].map((x, i) => (
+                      <p key={i}>Some content</p>
+                    ))}
+                  </div>
+                </div>
+              );
+            }}
+          </SimpleBarReact>
+        </div>
+      </section>
     </section>
   );
 };