Materialize-css With React, Initializing component

Question

I am stuck on initializing certain ui components that need Javascript, e.g, side-nav and carousel,
I tried to use React componentDIdMount() lifecycle method, using Javascript as in materialize docs like so,

import React, { Component } from 'react';
import MenuIcon from '@material-ui/icons/Menu';
import M from 'materialize-css/dist/js/materialize.min.js';
import 'materialize-css/dist/css/materialize.min.css';

class Navbar extends Component {
  componentDidMount() {
    document.addEventListener('DOMContentLoaded', () => {
      const elems = document.querySelectorAll('.side-nav');
      const instances = M.Sidenav.init(elems);
    });
  }

  render() {
    return (
      <React.Fragment>
        <div className="navbar-fixed">
          <nav className="teal">
            <div className="container">
              <div className="nav-wrapper">
                <a href="#home" className="brand-logo white-text">Travellizers</a>
                <a href="#!" data-target="mobile-nav" className="button-collapse hide-on-md-and-up">
                  <MenuIcon />
                </a>
                <ul className="right hide-on-med-and-down">
                  <li><a href="#home">Home</a></li>
                  <li><a href="#search">Search</a></li>
                  <li><a href="#popular">Popular places</a></li>
                  <li><a href="#about">about</a></li>
                </ul>
              </div>
            </div>
          </nav>
          <ul className="side-nav" id="mobile-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#search">Search</a></li>
            <li><a href="#popular">Popular places</a></li>
            <li><a href="#about">about</a></li>
            <li><a href="#contact">contact</a></li>
          </ul>
        </div>
      </React.Fragment>
    );
  }
}

export default Navbar;

But I am getting an Eslint error saying instances is assigned a value but never used. and still the side-nav isn't really working. I don't really know what am I missing.

here is my eslintrc.js file

module.exports = {
    "extends": "airbnb",
    "rules": {
        "react/jsx-filename-extension": [1, 
            { "extensions": [".js", ".jsx"] }
        ],
        "arrow-body-style": 0,
        "linebreak-style": 0,
        "no-tabs": 0,
      },
      "env": {
        "browser": true,
    },
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
      ],
};

this is a link from materialize docs explaining how to initialize a side-nav using Javascript, so I am just trying to get that to work here. Thanks very much in advance.

Regards.

Answer 1

You need to do npm install materialize-css@next. After this, you need to import the materialize-css in your component JS file.

To use the Javascript materialize-css components, a reference of these components has to be made in componentDidMount() and then it can be used in ref.

CodeSandbox - SideNav Demo

CodeSandbox - Carousel Demo

You can check other Materialize CSS components in React from this repository - GermaVinsmoke - Reactize

import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import image1 from "../public/parallax2.jpg";
import image2 from "../public/architecture-bridge-city-161853.jpg";

class Sidenav extends Component {
  componentDidMount() {
    const options = {
      inDuration: 250,
      outDuration: 200,
      draggable: true
    };

    M.Sidenav.init(this.Sidenav);

    let instance = M.Sidenav.getInstance(this.Sidenav);
    instance.open();
    console.log(instance.isOpen);
  }
  render() {
    return (
      <>
        <ul
          ref={Sidenav => {
            this.Sidenav = Sidenav;
          }}
          id="slide-out"
          className="sidenav"
        >
          <li>
            <div className="user-view">
              <div className="background">
                <img src={image2} />
              </div>
              <a href="#user">
                <img className="circle" src={image1} />
              </a>
              <a href="#name">
                <span className="white-text name">John Doe</span>
              </a>
              <a href="#email">
                <span className="white-text email">[e-mail]</span>
              </a>
            </div>
          </li>
          <li>
            <a href="#!">
              <i className="material-icons">cloud</i>First Link With Icon
            </a>
          </li>
          <li>
            <a href="#!">Second Link</a>
          </li>
          <li>
            <div className="divider" />
          </li>
          <li>
            <a className="subheader">Subheader</a>
          </li>
          <li>
            <a className="waves-effect" href="#!">
              Third Link With Waves
            </a>
          </li>
        </ul>
        <a href="#!" data-target="slide-out" className="sidenav-trigger">
          <i className="material-icons">menu</i>
        </a>
      </>
    );
  }
}

export default Sidenav;