Mixing JQuery and React — Pulling my hair out

I’m working on a website that is using Bootstrap 4 with a separate theme. That theme uses JQuery as the foundation of it’s structure. In my opinion JQuery is a little dated by then again JQuery is used in almost 74% of websites to date. So it doesn’t really matter how I feel about it.

So I figured tying JQuery and React together would be no big deal. Buuuutttt I was wrong. Since I’m working with a pre-built theme it kinda changes things with my approach. So now I have to figure out a way to use what’s already made and incorporate it with React, which isn’t how it was initially built.

In this instance I was trying to incorporate the use of a transparent navbar and on scroll change to a colored background. So let’s see my struggles and how I fixed them.

Initially, I kept running into an error saying '$' is not defined. Well wait JQuery relies on $, so how do I fix this? Some may say I cheated, but I felt this was the best move, I added jquery using yarn. It’s very simple, in the terminal I just ran yarn add jquery. Ok so now I have the JQuery package downloaded. React throws a curve ball though. How do we include JQuery inside a component so that we can write some code for our navbar? First things first, lets import JQuery. At top of file include import $ from 'jquery' will import $ so that we do things like $(document).ready(function() {}).

Ok so I’m still in the middle of trying to transfer most of the JQuery code to vanilla JS but this example shows mainly JQuery. Sidenote — some of this code doesn’t matter because it’s a complete site design.

import React, { Component } from 'react';
import Logo from './Logo';
import { NavLink } from 'react-router-dom';
import $ from 'jquery';
class TopNavigation extends Component {
  componentDidMount() {
    this.addAndRemoveNavbar();
  }
  componentDidUpdate() {
    this.addAndRemoveNavbar();
  }
  render() {
    return (
      <nav
      className="navbar navbar-expand-lg bg-white fixed-top navbar-transparent"
      color-on-scroll="500"
      >
      <div className="container">
        <div className="dropdown button-dropdown">
          <a
            className="dropdown-toggle"
            id="navbarDropdown"
            data-toggle="dropdown"
            aria-expanded="false"
          >
            <span className="button-bar"></span>
            <span className="button-bar"></span>
            <span className="button-bar"></span>
          </a>
        <div
          className="dropdown-menu"
          aria-labelledby="navbarDropdown"
        >
          <a className="dropdown-item">Repairs</a>
          <a className="dropdown-item">Schedule</a>
          <a className="dropdown-item">Location</a>
          <a className="dropdown-item">About Us</a>
          <a className="dropdown-item">Testimonials</a>
        </div>
      </div>
    <div className="navbar-translate col-4">
    <NavLink
      className="navbar-brand pt-0 pb-0"
      to="/"
    >
      <Logo className="w-100" />
    </NavLink>
    <button
      className="navbar-toggler navbar-toggler-right"
      type="button"
      data-toggle="collapse"
      data-target="#navigation"
      aria-controls="navigation-index"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span className="navbar-toggler-bar bar1"></span>
      <span className="navbar-toggler-bar bar2"></span>
      <span className="navbar-toggler-bar bar3"></span>
    </button>
  </div>
<div
  className="collapse navbar-collapse justify-content-end"
  id="navigation"
>
  <ul className="navbar-nav">
    <li className="nav-item">
      <NavLink
        to="/repairs"
        className="nav-link"
      >
        Repairs
      </NavLink>
    </li>
    <li className="nav-item">
      <NavLink
        to="/schedule-appointment"
        className="nav-link"
      >
        Schedule
      </NavLink>
    </li>
    <li className="nav-item">
      <NavLink
        to="/location"
        className="nav-link"
      >
        Location
      </NavLink>
    </li>
    <li className="nav-item">
      <NavLink
        to="/aboutus"
        className="nav-link"
      >
        About Us
      </NavLink>
    </li>
    <li className="nav-item">
      <NavLink
        to="/testimonials"
        className="nav-link"
      >
        Testimonials
      </NavLink>
    </li>
  </ul>
</div>
</div>
</nav>
)
}
addAndRemoveNavbar= function() {
let transparent = true;
// let navbar_initialized,
// backgroundOrange = false,
// toggle_initialized = false;
let big_image;
let nowuiKit = {
misc: {
navbar_menu_visible: 0
},
checkScrollForTransparentNavbar: debounce(function() {
if ($(document).scrollTop() > scroll_distance) {
if (transparent) {
transparent = false;
$('.navbar[color-on-scroll]').removeClass('navbar-transparent');
}
} else {
if (!transparent) {
transparent = true;
$('.navbar[color-on-scroll]').addClass('navbar-transparent');
}
}
}, 17),
initNavbarImage: function() {
navbar = $('.navbar').find('.navbar-translate').siblings('.navbar-collapse');
var background_image = navbar.data('nav-image');
if ($(window).width() < 991 || $('body').hasClass('burger-menu')) {
if (background_image != undefined) {
navbar.css('background', "url('" + background_image + "')")
.removeAttr('data-nav-image')
.css('background-size', "cover")
.addClass('has-image');
}
} else if (background_image != undefined) {
navbar.css('background', "")
.attr('data-nav-image', '' + background_image + '')
.css('background-size', "")
.removeClass('has-image');
}
},
}
nowuiKit.initNavbarImage();
let navbar = $('.navbar[color-on-scroll]');
let scroll_distance = navbar.attr('color-on-scroll') || 240;
// Check if we have the class "navbar-color-on-scroll" then add the function to remove the class "navbar-transparent" so it will transform to a plain color.
if ($('.navbar[color-on-scroll]').length != 0) {
nowuiKit.checkScrollForTransparentNavbar();
$(window).on('scroll', nowuiKit.checkScrollForTransparentNavbar)
}
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
timeout = null;
if (!immediate) func.apply(context, args);
}, wait);
if (immediate && !timeout) func.apply(context, args);
};
};
}
}
export default TopNavigation;

I probably should of imported my code. But this gives you a good idea of what I did. So I mixed a little bit of JQuery and JS together to create my navbar. It works great now but I still have a few small things I have to iron out.

If you have any suggestions or comments please leave them at the bottom. Until the next time we speak.