How i can use DropDown from Materialize css in React

Question

How can I use DropDown from Materialize css in React component? When I click on the button, there is no dropdown content My code below:

import React , {Component} from 'react';
import 'materialize-css';

export default class extends Component{
      openDropDown(){
          $('.dropdown-button').dropdown({
                  inDuration: 300,
                  outDuration: 225,
                  constrainWidth: false, // Does not change width of dropdown to that of the activator
                  hover: true, // Activate on hover
                  gutter: 0, // Spacing from edge
                  belowOrigin: false, // Displays dropdown below the button
                  alignment: 'left', // Displays dropdown with edge aligned to the left of button
                  stopPropagation: false // Stops event propagation
              }
          );
      }
      render(){
        return(
            <div className="input-field col s12">
                <a className='dropdown-button btn' data-activates='dropdown1' onClick={()=> this.openDropDown} >Drop Me!</a>
                <ul classID='dropdown1' className='dropdown-content'>
                    <li><a href="#!">one</a></li>
                    <li><a href="#!">two</a></li>
                    <li className="divider"></li>
                    <li><a href="#!">three</a></li>
                    <li><a href="#!"><i className="material-icons">view_module</i>four</a></li>
                    <li><a href="#!"><i className="material-icons">cloud</i>five</a></li>
                </ul>
            </div>
        )
    }
}

enjoi · Accepted Answer · 2018-09-28 05:07:11Z

You don't have to use JQuery with React and MaterializeCSS in order to initialise components.

What you need to do is correctly import M and initialise the dropdown inside componentDidMount(). There are two ways to do this;

You can simply use AutoInit().

M.AutoInit();

Or, as you're also passing options to initialise, you'd want to use:

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

My IDE seems to pick up that Downdown doesn't exist on M, however, the code runs fine in the browser.

An example with the above:

import M from 'materialize-css';  

class Foo extends Component {

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

    render(){
        return(
            <div className="input-field col s12">
                <a className='dropdown-button btn' data-activates='dropdown1'>Drop Me!</a>
                <ul id='dropdown1' className='dropdown-content'>
                  <li><a href="#!">one</a></li>
                  <li><a href="#!">two</a></li>
                  <li className="divider"></li>
                  <li><a href="#!">three</a></li>
                  <li><a href="#!"><i className="material-icons">view_module</i>four</a></li>
                 <li><a href="#!"><i className="material-icons">cloud</i>five</a></li>
                </ul>
            </div>
        )
    }

}
export default Foo;

Check out Materialize Dropdowns to see their docs on initialisation without JQuery.

Abdul Mahamaliyev · Accepted Answer · 2022-09-14 03:58:58Z

Better way with useRef:

import M from 'materialize-css';
import Link from 'next/link';
import { useEffect, useRef } from 'react';

type Props = {};

// TODO dynamically load the materialize-css dependency
export const SettingsMenuDropDown = (_props: Props) => {
  const ref = useRef(null);

  useEffect(() => {
    const elem = ref.current;
    M.Dropdown.init(elem, { inDuration: 300, outDuration: 225 });
  }, []);

  return (
    <>
      <a
        ref={ref}
        className="setting-menu dropdown-trigger matelializecss-default-setting-initial"
        data-target="dropdown-setting-menu"
      />
        
      <ul
        className="dropdown-content default-pattern"
        id="dropdown-setting-menu"
      >        
        <li>
          <Link href={'/settings'}>Settings</Link>
        </li>            
      </ul>
    </>
  );
};

Shubham SHACK · Accepted Answer · 2017-09-14 05:45:15Z

-1

There's an import for materialize, (it's react compatible materialize module, which makes work super easy!) I would suggest using it, rather than making it yourself.

Though the docs are yet to complete, you can refer to them! Getting started with materialize for react : https://react-materialize.github.io/#/

Materialize DropDown here : https://react-materialize.github.io/#/dropdown

Good going!

answered Sep 14, 2017 at 5:45

Shubham SHACK

114 bronze badges

2 Comments

enjoi Over a year ago

This is not an import. It's a package. react-materialize contains only subset of Materialize components which would need to be maintained as new features are released by the Materialize team. I'm not saying don't use the package, I'm sure it has some advantages and ease of use; just something to think about before moving a whole project over!

kevr Over a year ago

This has nothing to do with OP's question.

Collectives™ on Stack Overflow

How i can use DropDown from Materialize css in React

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related