This is NOT a tutorial on the package called react-materialize.
I will be showing you how to use Materialize natively in a React project, more specifically, a create-react-app project.
I have nothing against using that package, however, I really prefer not to rely on third party packages especially when you really don't need to in this case, using MaterializeCSS with React is super easy once you're set up!


There are a couple of ways to get started according to the Materialize docs, however, we'll be using the npm install.

So lets go ahead and install MaterializeCSS and import the things we need to import in our project.

npm install materialize-css@next


import 'materialize-css/dist/css/materialize.min.css';


<link href="" rel="stylesheet">

Note: You don't need to import the JS files or include them in your index.html

Initialize Materialize Components

If you've had a bit of a wander around the docs you might have noticed that some components such as the collapsibles, dropdowns and form selects etc. need to be initialized. Materialize give us two ways to initialize components;

  1. Native Javascript
  2. JQuery

Seeing as we're using React, it would be ill-advised to use JQuery so lets go with the former.

Lets go ahead and set some of these up.

Using AutoInit()

import React, {Component} from 'react';

// Import Materialize
import M from "materialize-css";

class SuperCoolComponent extends Component {

    componentDidMount() {
        // Auto initialize all the things!
    render() {
          <div className="input-field col s12">
              <option value="" disabled selected>Choose your option</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
            <label>Materialize Select</label>

export default SuperCoolComponent;

Using M.AutoInit() is the fastest way to get things up and running, and it saves you from explicitly initializing every component which can be tedious should you have a lot of them.
I have run into issue when trying to explicitly initialize components after M.AutoInit(). In my case I had a bunch of selects and collapsibles that I just wanted to auto initialize, however, for my dropdown component, I wanted to pass some options and it simply did not work while AutoInit was standing.

NOTE: You can also just add no-autoinit to an elements className to let AutoInit know that it can ignore initialzing that element which should avoid the problems just stated above.

Being Explicit!

Let's return to our componentDidMount function and change it to initialize the select explicitly.

componentDidMount() {
    let selects = document.querySelectorAll('select');
    M.FormSelect.init(selects, {});

We can also pass some options as the second argument to the init function. Let's use Materialize dropdowns for this example

componentDidMount() {
    let dropdowns = document.querySelectorAll('.dropdown-trigger');
    let options = {
        inDuration: 300
        outDuration: 300,
        hover: true, // Activate on hover
        coverTrigger: false, // Displays dropdown below the button
    M.Dropdown.init(dropdowns, options);

There are many other options to be found in the dropdown docs, these are just the default ones I like to use as I find coverTrigger being true by default to be super abnormal.


That's all there is to it! Just install, import and initialize if necessary.
I hope you found this helpful and thanks for reading!