Reactjs: JQuery Custom Content Scroller With Reactjs

im tryin to integrate Jquery custom scrollbar plugin here in react. here is my code import $ from 'jquery'; import mCustomScrollbar from 'malihu-custom-scrollbar-plugin'; ..... c

Solution 1:

That’s not a React error. That’s based on your module loader (webpack, I’m guessing?) treating the jQuery plugin as if it were an ES2015 module. Try importing your plugin in the CommonJS style. In other words, replace:

import mCustomScrollbar from 'malihu-custom-scrollbar-plugin';

with:

var mCustomScrollbar = require('malihu-custom-scrollbar-plugin');

If that doesn’t work, you will need to share more info about your module loader and its configuration.

That said, as Toby mentioned, trying to combine jQuery plugins with React components is often unreliable and tricky, so proceed with caution.

Solution 2:

Here was my solution to get things to work within my react project. I took the original concatenated and minified files and made an exportable class such that my react components could use it.

Here's what I did:

// MCustomScrollBar.js 
export default class MCustomScrollbar {

  constructor() {

  /*
      MCustomScrollbar depends on jquery mousewheel.  So I went to my browser url and typed

      http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js

      I selected all the content on the page and pasted it into my constructor() here.
  */

  /*
      I then copied all the contents of jquery.MCustomScrollbar.concat.min.js
      and pasted it into my constructor() here.
  */

  }


}

Great, now I'm ready to use this in my react components. Here's an example of how I used it

// MyHomeComponent.js
import React from 'react';
import $ from 'jquery';

export default class MyHomeComponent extends React.Component {
  componentDidMount() {
    const MCSB = require('./<path>/MCustomScrollBar');
    let mcsb = new MCSB.default();

    $("#mypage").mCustomScrollbar({theme:'dark'});

  }
  render() {
    return (<div id="mypage">Enter a lot of content here..</div>);
  }

}

EDIT

Although I pasted in the minified code, you could just as well have pasted the original code. That would make it easier if you intend to modify the plugin code.