CODEWITHSUNDEEP
javascriptreactjscarouselmaterialize
Mohamed Youssef
Mohamed Youssef

Reputation: 23

Initialize materializecss component in React

I'm trying to add the Carousel image slider from MaterializeCSS to a simple React component but i'm not able to initialize it! It would be very helpful to know where i should do it in my code

import React, { Component } from 'react';
import { M } from 'materialize-css/dist/js/materialize.min.js';

export default class Slider extends Component {
  componentDidMount() {
   var elem = document.querySelector('.carousel');
   var instance = M.Carousel.init(elem, { duration: 200 });
 }
render() {
 return (
  <div className="container center-align">
   <h1 className="header pink-text">Slider</h1>
    <div className="carousel">
      <a className="carousel-item" href="#one!">
        <img src="https://www.w3schools.com/images/picture.jpg" />
      </a>
      <a className="carousel-item" href="#two!">
        <img src="../../public/images/lana/1.jpg" />
      </a>
      <a className="carousel-item" href="#three!">
       <img src="../../public/images/lana/1.jpg" />
      </a>
      <a className="carousel-item" href="#four!">
       <img src="../../public/images/lana/1.jpg" />
      </a>
       <a className="carousel-item" href="#five!">
        <img src="../../public/images/lana/1.jpg" />
       </a>
     </div>
    </div>
  );
 }
}

this gives me an Error: Cannot read property 'Carousel' of undefined

i tried to do it with Jquery, no errors but didn't work!

Upvotes: 2

Views: 6239

Answers (7)

Hussain Ruhullah
Hussain Ruhullah

Reputation: 11

add window.M. ...

  useEffect(() => {
var elem = document.querySelector(".carousel");
var instance = window.M.Carousel.init(elem, {
  fullWidth: true,
  indicators: true,
});

});

Upvotes: -1

Hugo Ramirez
Hugo Ramirez

Reputation: 496

Using React Hook with useEffect you can also initialize each feature on Materialize, for example:

    import React, { useEffect, Fragment } from "react";

    import M from "materialize-css/dist/js/materialize.min.js";

useEffect(() => {
    // Init Tabs Materialize JS
    let tabs = document.querySelectorAll(".tabs");
    M.Tabs.init(tabs);
});

In my case, I used tabs to initialize the Materialize feature.

Upvotes: 2

anon ymous
anon ymous

Reputation: 21

I had the same issue.

Solved it by adding the materializecss npm module 

npm install materialize-css

and then importing it into the component 

import M from "materialize-css";

and in the componentDidUpdate method, added the init 

componentDidUpdate() {

    let collapsible = document.querySelectorAll(".collapsible");

    M.Collapsible.init(collapsible, {});
  }

Problem solved!!

Upvotes: 2

Mohamed Youssef
Mohamed Youssef

Reputation: 23

I initialize the Carousel js code from the main html page with setTimeout() function, i used a spinner to make look little better

it looks like this

<script>

    setTimeout(() => {
      var elem = document.querySelector('.carousel');
      var instance = M.Carousel.init(elem, {});
      if (document.querySelector('.photos').classList) {
        document.querySelector('.photos').classList.remove("spinner")
      }
    }, 2000)
  </script>

Upvotes: 0

Jakub Kawalec
Jakub Kawalec

Reputation: 69

Looks like you're using a .min file to import M from. You should install MaterializeCSS as a node module instead. You're getting an error because M is not defined as anything. There aren't any exports from that .min file.

If you want to wait until the script has loaded it is better to do that with a callback instead of setTimeout.

function loadScript(url, callback) {
  var script = document.createElement("script")
  script.type = "text/javascript";
  if (callback) { 
    script.onload = callback; 
  }
  document.body.appendChild(script)
  script.src = url;
}


loadScript(pathtoscript, function() {
  alert('script ready!'); 
});

Upvotes: 1

Mohamed Youssef
Mohamed Youssef

Reputation: 23

I figured out that it needs some time to render the content. When I use setTimeout() function and call that initialization JS lines it worked.

Upvotes: 0

mindaJalaj
mindaJalaj

Reputation: 448

If you want to use min.js file in your application, try adding it in html file using tag.

Alternatively try adding node modules using npm package.

Hope this helps.

Upvotes: 0

Related Questions