React - how to add jquery script with Materialize's function

Question

Hello I'd like to add jquery to a react app, but I don't know how to do it. I use materialize to build a navbar and I want to use .sidenav function from their lib.

I installed jquery

npm install jquery

and add

import $ from "jquery";

to ./app.js, then in Navbar.js i got /

import { Link } from "react-router-dom";

const Navbar = () => {

  return (
    <>
      <nav className="nav-wraper">
        <div className="container">
          <a Link to="/" className="brand-logo">
            Blog
          </a>
          <a Link to="/" className="sidenav-trigger" data-target="mobile-links">
            <i className="material-icons">menu</i>
          </a>
          <ul className="right hide-on-med-and-down">
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/create">New Blog</Link>
            </li>
            <li>
              <Link to="/signup">Sign up</Link>
            </li>
          </ul>
        </div>
      </nav>

      <ul className="sidenav" id="mobile-links">
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/create">New Blog</Link>
        </li>
        <li>
          <Link to="/signup">Sign up</Link>
        </li>
      </ul>
    </>
  );
};

export default Navbar;

Where am I supposed to put this code?:

$(document).ready(function () {
        $(".sidenav").sidenav();
      });

qafoori · Accepted Answer · 2021-02-02 14:26:08Z

0

In a way, you don't need to use $(document).ready statement. instead of that, you can use useEffect with an empty deps array ([]) in functional components or componentDidMount in class components. see the below example: (Remember to use Materilized-css CDNs in index.html). In functional component (As you are):

import React, { useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import M from 'materialize-css';
    
const Navbar = () => {
    const myNavbar = useRef('');
    useEffect(() => {
        M.Sidenav.init(myNavbar);
    }, []);

    return (
        <>
            <nav className="nav-wraper" ref={myNavbar}>...</ul>
        </>
    );
};
export default Navbar;

For more information about useEffect and useRef statements, i would like to refer you to the official documentation

edited Feb 2, 2021 at 14:26

answered Feb 2, 2021 at 12:48

qafoori

9519 silver badges14 bronze badges

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

12 Comments

xxxbud Over a year ago

TypeError: jquery__WEBPACK_IMPORTED_MODULE_3___default(...)(...).sidenav is not a function - in $(".sidenav").sidenav();

qafoori Over a year ago

Did you import materialize in your component?

qafoori Over a year ago

Remember that you should first import React. then jQuery and at the end materialize.

xxxbud Over a year ago

Yes, I did it like this: stackoverflow.com/questions/50389269/… I got import 'materialize-css/dist/css/materialize.min.css'; in index.js and I installed materialize by terminal command

xxxbud Over a year ago

Even if I add: import "materialize-css/js/sidenav.js"; to a navbar.js compontent it show the same error

|

Collectives™ on Stack Overflow

React - how to add jquery script with Materialize's function

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related