How integrate jQuery plugin in React

Question

I want to use https://github.com/t1m0n/air-datepicker with in a React app, but it doesn't work.

import React from 'react';
import AirDatepicker from 'air-datepicker';

class Datepicker extends React.Component {
  render() {
    return(
      <AirDatepicker />
    )
  }
}

export default Datepicker;
`

<script src="./../bower_components/jquery/dist/jquery.min.js"></script>

This produces:

error($ is not defined)

Another approach:

import React from 'react';
import $ from 'jquery';
import AirDatepicker from 'air-datepicker';

class Datepicker extends React.Component {
  render() {
    return(
      <AirDatepicker />
    )
  }
}

export default Datepicker;

Same error.

How can I integrate a jQuery plugin with React?

Answer 1

First of all air-datepicker is 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.

class MyComponent extends React.Component {
  componentDidMount(){
    this.initDatepicker();
  }
  
  initDatepicker(){
    $(this.refs.datepicker).datepicker();
  }
  
  render(){
    return (
      <div>
        <h3>Choose date!</h3>
        <input type='text'  ref='datepicker' />
      </div>    
    )
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet"/>

<div id="app"></div>

As separate component

Very simple datepicker React component example

class Datepicker extends React.Component {
  componentDidMount(){
    this.initDatepicker();
  }
  
  initDatepicker(){
    $(this.refs.datepicker).datepicker(this.props);
  }

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


class MyComponent extends React.Component {
  render(){
    return (
      <div>
        <h3>Choose date from React Datepicker!</h3>
        <Datepicker range={true} />
      </div>    
    )
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet"/>

<div id="app"></div>

Also don't forget to include css files.