chore(react): allow usage of ref even with render function pattern

Grsmto · Oct 4, 2019 · 65da0dd · 65da0dd
1 parent 0ea54fc
commit 65da0dd
Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/simplebar-react/index.js b/packages/simplebar-react/index.js
@@ -42,7 +42,7 @@ export default function SimpleBar({
   ...otherProps
 }) {
   const elRef = useRef('lol');
-  const scrollableNodeRef = useRef();
+  const scrollableNodeRef = scrollableNodeProps.ref || useRef();
   const contentNodeRef = useRef();
   let options = {};
   let rest = {};

diff --git a/packages/simplebar/demo/Demo.js b/packages/simplebar/demo/Demo.js
@@ -25,6 +25,8 @@ const renderScrollbar = props => {
 };
 
 class Demo extends React.Component {
+  scrollableElRef = React.createRef();
+
   componentDidMount() {
     new SimpleBar(document.getElementById('manual-instantiation'));
     new SimpleBar(document.getElementById('with-classnames'), {
@@ -47,6 +49,10 @@ class Demo extends React.Component {
         console.log(performance.now() - start);
       }
     });
+
+    // this.scrollableElRef.current.addEventListener('scroll', e =>
+    //   console.log(e)
+    // );
   }
 
   render() {
@@ -274,6 +280,7 @@ class Demo extends React.Component {
               className="demo1"
               autoHide={false}
               data-simplebar-force-visible="x"
+              scrollableNodeProps={{ ref: this.scrollableElRef }}
             >
               {({ scrollableNodeRef, contentNodeRef }) => (
                 <List