How to include Materialize?

[Oxyrus]

There are instructions to add Bootstrap but I can't find how to add Materialize to my application, specially the JavaScript files.

Does anybody have experience integrating it?

[Reanmachine]

What you'll need is react-materialize. It's a component library that will bind your react controls to the JS required for that particular material design library to work correctly.

You can use the npm package materialize-css to include the CSS Stylesheets or you can use the CDN / Local copy and the process should be rather similar to the bootstrap example.

You can also look at one of the many alternate material-design ui libraries for react:

• Material UI - Uses style="..." everywhere!
• React-Toolbox - Version 1.x is not CRA compatible, but Version 2.x is with react-toolbox-themr
• React-MDL - Haven't tried with CRA

And about 100 more im sure I am missing.

[Oxyrus]

Thank you very much @Reanmachine I'll use react-materialize then.

[rahulakrishna]

With other boilerplates with redux included, I usually just add the script links in my index.html and initialize them in the componentDidUpdate. Create-react-app won't include those js files before react for some reason. Any workaround?

[gaearon]

It's not clear what you mean by “initialize” or “won’t include”. Can you show a full example?

Normally, if you need a library, we recommend consuming it from npm. Install it with npm and then use import to get it. This is described here.

If your library is not available on npm and you must use a separate script, you should add it to the public folder and add a <script> tag as described here. It would look like:

  <script src="%PUBLIC_URL%/mylibrary.js"></script>

Since the library would be in the global scope, you’d need to read it from a global variable, as described here:

const MyLibrary = window.MyLibrary;

Then you can use it.

Does this help?

[alextrastero]

If you are trying to use react-materialize with create-react-app you'll need to follow these instructions: https://github.com/react-materialize/react-materialize#create-react-app

[muhammedMoussa]

1. install it via npm
2. import! in your entry js file

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