Initializing PerfectScrollbar in React app

Question

I was using the old version of perfect-scrollbar in my React app. In the old version, there was an ps.initialize() method that I was using with a ref to the section that I wanted to use perfect scrollbar for.

I tried the new approach -- see below -- but perfect scrollbar doesn't seem to be initializing.

import PerfectScrollbar from 'perfect-scrollbar';

class MyComponent extends Component {

   componentDidMount() {

      const sb1 = new PerfectScrollbar(this.refs.ref1);
      const sb2 = new PerfectScrollbar(this.refs.ref2);
      sb1.update();
      sb2.update();
   }

   render() {
      return(
           <div ref="ref1">
                Section 1
           </div>
           <div ref="ref2">
                Section 2
           </div>
      );
   }
}

export default MyComponent;

What's the right way to use perfect scrollbar in a React app? BTW, there's a React Wrapper for perfect scrollbar but it hasn't been updated for a while and this newly updated version of perfect-scrollbar has addressed some of the issues of the old one so I'd really like to use this one. I'd appreciate some pointers here. Thanks.

The documentation says you can just initialize it with `new PerfectScrollbar('#container')` or you can add options in the second argument. Does this not work? — wbd, Jan 21 '20 at 19:47
I tried that as well and I'm getting `Error: no element is specified to initialize PerfectScrollbar` which I think is saying that I'm trying to initialize perfect scrollbar before the container is ready but I'm doing this in `componentDidMount()` method so it should be ready. — Sam, Jan 21 '20 at 19:53
Right, so where else can I initialize `perfect-scrollbar`? By the time I hit `componentDidMount()`, the container should be ready. — Sam, Jan 21 '20 at 20:17

score 0 · Accepted Answer · answered Jan 21 '20 at 19:54

basically reading the documentation you can see the following:

to initialize:

const ps = new PerfectScrollbar('#container');

therefore you can change your code to the following:

import PerfectScrollbar from 'perfect-scrollbar';

class MyComponent extends Component {

   componentDidMount() {

      const parent = new PerfectScrollbar('.parent');
      const sb1 = new PerfectScrollbar('.sb1');
      const sb2 = new PerfectScrollbar('.sb2');

      parent.update();
      sb1.update();
      sb2.update();
   }

   render() {
      return(
           <div className="parent">
                <div className="sb1" ref="ref1">
                     Section 1
                </div>
                <div className="sb2" ref="ref2">
                     Section 2
                </div>
           </div>
      );
   }
}

export default MyComponent;

also it would be easy to use the wrapper that you mention, the idea of those kind of wrappers is to aliviate those initializations.

your code would end up like this:

import PerfectScrollbar from 'react-perfect-scrollbar'

class MyComponent extends Component {

   render() {
      return(
           <PerfectScrollbar>
                <div className="sb1" ref="ref1">
                     Section 1
                </div>
                <div className="sb2" ref="ref2">
                     Section 2
                </div>
           </PerfectScrollbar>
      );
   }
}

export default MyComponent;

note: you are not saying what version you are using, so I just assumed you were on the latest one :)

Thanks for your response but that's not working. I'm getting `Error: no element is specified to initialize PerfectScrollbar`. And yes, I'm using the latest version of `perfect-scrollbar` which is `1.5.0`. Also, in your code, in `componentDidMount()`, I assume you mean `const sb1 = new PerfectScrollbar('#sb1');` and not `const sb1 = new PerfectScrollbar('.sb1');` because we're using class name to hook `perfect-scrollbar` and not `ID`. — Sam, Jan 21 '20 at 20:15
no @Sam I mean ('.sb1') because they are all `classes` not `id`. — Prince Hernandez, Jan 21 '20 at 20:18
OK. Thanks. One step closer. I'm not getting the "no element is specified" error but it's still not scrolling. I'm not getting any errors either. Just not scrolling at all. — Sam, Jan 21 '20 at 20:23
It's working now. I was missing the container requirements e.g. position, overflow: 'hidden', etc. Thank you for your help. — Sam, Jan 21 '20 at 20:36
I try to use the `react-perfect-scrollbar` in a nextjs app, but I have the error `TypeError: Cannot read property 'style' of undefined` — Pablo Tondolo de Vargas, Nov 22 '21 at 10:55

Initializing PerfectScrollbar in React app

1 Answers1