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.

Answer 1

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 :)