how to use in react

[suwu150]

I've read the readme.md file, but I still didn't deploy it successfully. my webpack.config.js is below:

          { test: /jquery-mousewheel/, loader: "imports?define=>false&this=>window" },
          { test: /malihu-custom-scrollbar-plugin/, loader: "imports?define=>false&this=>window"}

and ,Could i use it in react Component? Do you use the following code directly? Where should this code be placed?

import $ from 'jquery';
require('jquery-mousewheel')($);
require('malihu-custom-scrollbar-plugin')($);

And I've read this article, but where should I put it in the life cycle? How to bind to a container？ issues/404

[sudhanshug16]

Did you find out how to do it? Because I am stuck here as I am getting an error: Menu.jsx:43 Uncaught TypeError: __webpack_require__(...) is not a function

[DuudeXX8]

same error

[limjinda]

I had the same problem. this is just a quick fixed and it works for me

first npm install jquery --save

in your file

import $ from 'jquery'
let mCustomScrollbar = ''

const scrollBarLoaded = () => {
  return new Promise( (resolve, reject) => {
    const scrollStyle = document.createElement('link')
    scrollStyle.type = 'text/css'
    scrollStyle.rel = 'stylesheet'
    scrollStyle.href = 'https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css'
    document.getElementsByTagName('head')[0].appendChild(scrollStyle);

    const scrollScript = document.createElement('script')
    scrollScript.onload = resolve
    scrollScript.onerror = reject
    scrollScript.id = 'scroll_script'
    scrollScript.async = true
    scrollScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js'
    document.body.appendChild(scrollScript)
  })
}

now in your componentDidMount

window.jQuery = $
scrollBarLoaded().then( () => {
      mCustomScrollbar = window.mCustomScrollbar
      $('.awesome-class').mCustomScrollbar({
          theme: 'light'
      })
})

hope this help

[VictorRus]

Thats works for me. I hope this will help someone.

first npm install jquery-mousewheel --save

In your component:

import $ from 'jquery'
import 'malihu-custom-scrollbar-plugin'
import 'malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css'

after all imports:

require('jquery-mousewheel')

and init scroll in componentDidMount

componentDidMount() {
     $('.any-class').mCustomScrollbar({
         theme: "light",
         axis:"yx",
         setHeight: 613,
     })
}