Reactjs: jQuery custom content scroller with reactjs

Question

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';
.....
 componentDidMount: function() {
     // fixed sidebar
        var self = this;
        mCustomScrollbar($);
        $(ReactDom.findDOMNode(this.refs.menu_fixed)).mCustomScrollbar({
            autoHideScrollbar: true,
            theme: 'minimal',
            mouseWheel:{ preventDefault: true }
        });
        self.forceUpdate();
  },

i get this error index.jsx:51 Uncaught TypeError: (0 , _malihuCustomScrollbarPlugin2.default) is not a function

did somebody can help to make it work thanks

I'm no React expert, but I don't think you can use jQuery with React - React uses a 'virtual DOM' and jQuery manipulates the actual DOM. There may be ways to use them together, but as I understand it you're better off with a pure React solution. — Toby, Jul 20 '16 at 23:04

score 0 · Accepted Answer · edited May 23 '17 at 12:19

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.

Thanks Andrew, the common JS import syntax fixe my issue – Abdou FALL Jul 21 '16 at 14:51 — Abdou FALL, Jul 21 '16 at 14:51

score 0 · Answer 2 · answered Oct 08 '16 at 23:29

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.

Reactjs: jQuery custom content scroller with reactjs

2 Answers2

Linked