How To Use jQuery Plugins Inside React

Question

I want to use a few plugins on my website which is done completely with react. The issue is I don't understand how to run it in a react component without just turning the screen black. I've tried methods online which I could understand but they didn't work.

For example I want to use dropotron on my navigation bar

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';

import BookModal from './modals/BookModal';
import UserInfoModal from './modals/UserInfoModal';
import GroupReservationModal from './modals/GroupReservationModal';
import ThankYouModal from './modals/ThankYouModal';

import $ from 'jquery';

class Header extends React.Component {
    constructor(props){
        super(props);
        this.state ={
            showModal: false,
            showUserInfoModal: false,
            showGroupReservationModal: false,
            showThankYouModal: false
        };
        this.openModal = this.openModal.bind(this);
        this.exitModal = this.exitModal.bind(this);
        this.switchModalUserInfo = this.switchModalUserInfo.bind(this);
        this.switchModalGroupReservation =                                this.switchModalGroupReservation.bind(this);
        this.switchModalThankYou = this.switchModalThankYou.bind(this);
    }

    componentDidMount(){
      	$('#nav > ul').dropotron({
				alignment: 'left',
				hideDelay: 350,
				mode: 'slide'
			});
    }

    //omitted some functions
    render(){
        return (
            //JSX i want to apply dropotron to
            <div>
                <header id="header" >
                    
                    <nav id="nav">
                        <ul>
                            <li>
                                <a><span className="icon fa-angle-down"></span> Experiences</a>
                                <ul>
                                    <li><a href="/experience1">Experience1</a></li>
                                    <li><a href="/experience2">Experience2</a></li>
                                </ul>
                            </li>
                        
                            <li>
                                <a><span className="icon fa-angle-down"></span> More</a>
                                    <ul>
                                        <li><a href="/contact">Contact</a></li>
                                        <li><a href="/franchise">Franchise</a></li>
                                        <li><a href="/gift">Gift Card</a></li> 
                                       
                                    </ul>
                            </li>
                            <li>
                                <a 
                                    id="navbar-book"
                                    onClick={this.openModal} 
                                    href="#"
                                    className="book-button">
                                    <span onClick={this.openModal} >Book Now</span>
                                </a>
                            </li>
                            <li className="special">
                                <a href="#menu" className="menuToggle" ><span>Menu</span></a>
                            </li>
                        </ul>
                    </nav>
                </header>
            </div>
        )
    }
};


export default Header;

I copy pasted the plugin in component did mount but it doesn't do anything except make the screen go black. I have also tried creating a seperate function and calling it from componentDidMount.

There's a lot of jquery plugins that I want to use but I just don't understand how they can be implemented with react in general.

My file hierarchy is as follows:

Index

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>asfasfd</title>
        <link rel="icon" type="image/png" href="/images/favicon.png">

    </head>
    <body>
        <div id="app"></div>
        <script src ="/bundle.js"></script>
    </body>
</html>

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './routers/AppRouter';
import 'normalize.css/normalize.css';
import './css/bundle.css';
import './css/modal.css';
import Footer from './components/Footer'

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

Approuter just uses react-router dom to load the pages which are their own components.

I've never used jquery before and just learned react so using them together is confusing. Any answers or directions towards some more useful resources would be appreciated.

I would 100% avoid using them together. They don't play well together and for the most part anything you should be able to do in jquery should be accomplishable in react. You might need to spend sometime learning some new JS libraries but that is just my two cents. My company actually gave me sometime to rewrite a jquery collapsing table into react so that our team didn't have to deal with a similar issue. Here is the link if you do end up needing a collasping table or want to see how I did a few things. — Tall Paul
– Tall Paul, Commented May 29, 2018 at 23:33

Alex Barbulescu · Accepted Answer · 2018-06-11 14:55:20Z

1

Although it's hacky to use both together, I had gotten a few plugins to work by linking them in my index.html and placing them in componentDidMount. The main issue was that I was importing $ from jquery in my component, since it's available globally from linking it in index.html removing that line solved my issue. The same goes for any other plugins, don't import jquery or plugins in your component, just link them in your index.html.For my purposes it works fine, although upon some research it may not work for more complex things.

answered Jun 11, 2018 at 14:55

Alex Barbulescu

3315 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Johann Over a year ago

I tried this and it ends up with an exception that "$" is not defined.

Rehman Gull · Accepted Answer · 2019-04-08 08:02:30Z

1

You first has to add jquery through npm like:

npm i jquery --save

and then use Jquery in your component as

import $ from 'jquery';

answered Apr 8, 2019 at 8:02

Rehman Gull

637 bronze badges

Comments

WebQube · Accepted Answer · 2021-02-24 14:54:21Z

0

I used a jquery plugin like so

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


async componentDidMount() {
   window.$("table").stupidtable()
}

answered Feb 24, 2021 at 14:54

WebQube

9,01112 gold badges55 silver badges99 bronze badges

Collectives™ on Stack Overflow

How To Use jQuery Plugins Inside React

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related