CODEWITHSUNDEEP
reactjsmaterialize
oderfla
oderfla

Reputation: 1797

How to use materialize dropdown in react

What I have is an app with react hooks where I just downloaded materialize as pure css. Im trying to implement a button that will show a dropdown according to this:

https://materializecss.com/dropdown.html

Of course I don't have and don't want to have query. So the information there about how to trigger the dropdown are not usable. Googling I realized that you should "import" M from materialize-css. Something like this:

import M from 'materialize-css';  

useEffect(){
    let elems = document.querySelectorAll('.dropdown-trigger');
    M.Dropdown.init(elems, {inDuration: 300, outDuration: 225});
}

But this will not work, of course. I do not have a component called "materialize-css". And I cannot import the very css file, which is not a component but a simple css file.
So what I did was to download from here:

https://materializecss.com/getting-started.html

And get the .js file. But what now? If i import this in my component like this:

    import M from 'materialize-css.js';

then everything gets broken. Just including that file from a component will make my app crash with a lot of errors about M. Is this the way to go? Or how am I supposed to interact with materialize to change css on elements?

Upvotes: 1

Views: 193

Answers (1)

dungmidside
dungmidside

Reputation: 518

You should install this package through npm npm install materialize-css@next

Then import it to your component import * as M from 'materialize-css'.Then it ready to go

If you prefer add js file instead of install package, you could read more here Adding script tag to React/JSX

Upvotes: 2

Related Questions