How Integrate Jquery Plugin In React

I want to use https://github.com/t1m0n/air-datepicker with in a React app, but it doesn't work. This produces: error($ is not defined) Another approach: Same error. How can I in

Solution 1:

First of all air-datepickeris not React component, it's jQuery plugin, so it won't work like in your examples.

Secondly, for proper work, jQuery should be availabel in global context, the most esiest ways to do this is to include it into page via <script> tag. It should be included before plugin script.

To check if its really included and it available globally, just type in Chrome console window.jQueryand press Enter it should return something like function (a,b){...}. If not, when you doing something wrong, check src attribute of <script> tag, maybe it pointing to wrong destination

How to get it worked in React?

Well, the most simpliest way is just to initialize plugin on any DOM element in your component, like in regular JavaScript.

classMyComponentextendsReact.Component {
  componentDidMount(){
    this.initDatepicker();
  }
  
  initDatepicker(){
    $(this.refs.datepicker).datepicker();
  }
  
  render(){
    return (
      <div><h3>Choose date!</h3><inputtype='text'ref='datepicker' /></div>    
    )
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('app')
);

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css"rel="stylesheet"/><divid="app"></div>

As separate component

Very simple datepicker React component example

classDatepickerextendsReact.Component {
  componentDidMount(){
    this.initDatepicker();
  }
  
  initDatepicker(){
    $(this.refs.datepicker).datepicker(this.props);
  }

  render(){
    return (
      <inputtype='text'ref='datepicker'/>
    )
  }
}


classMyComponentextendsReact.Component {
  render(){
    return (
      <div><h3>Choose date from React Datepicker!</h3><Datepickerrange={true} /></div>    
    )
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('app')
);

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css"rel="stylesheet"/><divid="app"></div>

Also don't forget to include css files.

Solution 2:

air-datepicker is not the React-component. It is the jquery-plugin, so we can follow this tutorial https://reactjs.org/docs/integrating-with-other-libraries.html

importReactfrom'react'import $ from'jquery'import'air-datepicker/dist/js/datepicker.js'import'air-datepicker/dist/css/datepicker.css'classAirDatepickerextendsReact.Component {
    componentDidMount(){
        this.$el = $(this.el)
        this.$el.datepicker()
    }

    render() {
        return (
            <div><inputref={el => this.el = el}/>
            </div>
        )
    }
}

exportdefaultAirDatepicker

But it still not work cause the jquery not the dependency of the air-datepicker.

ReferenceError: jQuery is notdefined
./node_modules/air-datepicker/dist/js/datepicker.js
D:/demo/react/jq-plugin/datepicker/node_modules/air-datepicker/dist/js/datepicker.js:22362233 |         }
  2234 |     };
  2235 | })();
> 2236 |  })(window, jQuery);
  2237 | 
  2238 | 
  2239 | //////////////////

Follow the error message and the easiest way is to hake the air-datepicker. Add jQuery as the dependency in the first line of the air-datepicker/dist/js/datepicker.js

Before:

1 |;(function (window, $, undefined) { ;(function () {
  2 |    varVERSION = '2.2.3',
  3 |        pluginName = 'datepicker'

After:

> 1 |import jQuery from'jquery'2 |;(function (window, $, undefined) { ;(function () {
  3 |    varVERSION = '2.2.3',
  4 |        pluginName = 'datepicker'

Thus <AirDatepicker /> can works well as the React-component.

Solution 3:

My Solution is

import'stupid-table-plugin';
...


asynccomponentDidMount() {
   window.$("table").stupidtable()
}