Initializing materialize in react apps

Multi tool use
I am new to ReactJS. So I have a straight forward question.
I have used materialize cdn, included in index.html. But when I try to initialize it in my component it says 'M' not defined. Where should I initialize the same.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root"></div>
</body>
</html>
My component looks something like this
import React from "react";
class Dashboard extends React.Component {
componentDidMount() {
document.addEventListener("DOMContentLoaded", function() {
var elems = document.querySelectorAll(".carousel");
var instances = M.Carousel.init(elems, options);
});
}
}
export default Dashboard;
CodeSandbox link: - https://codesandbox.io/s/40jvz6j590
reactjs materialize
add a comment |
I am new to ReactJS. So I have a straight forward question.
I have used materialize cdn, included in index.html. But when I try to initialize it in my component it says 'M' not defined. Where should I initialize the same.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root"></div>
</body>
</html>
My component looks something like this
import React from "react";
class Dashboard extends React.Component {
componentDidMount() {
document.addEventListener("DOMContentLoaded", function() {
var elems = document.querySelectorAll(".carousel");
var instances = M.Carousel.init(elems, options);
});
}
}
export default Dashboard;
CodeSandbox link: - https://codesandbox.io/s/40jvz6j590
reactjs materialize
1
Try react-materialize.github.io
– Boy With Silver Wings
Dec 27 at 14:16
Thanks, now it works
– Someindra Singh
Dec 27 at 14:37
add a comment |
I am new to ReactJS. So I have a straight forward question.
I have used materialize cdn, included in index.html. But when I try to initialize it in my component it says 'M' not defined. Where should I initialize the same.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root"></div>
</body>
</html>
My component looks something like this
import React from "react";
class Dashboard extends React.Component {
componentDidMount() {
document.addEventListener("DOMContentLoaded", function() {
var elems = document.querySelectorAll(".carousel");
var instances = M.Carousel.init(elems, options);
});
}
}
export default Dashboard;
CodeSandbox link: - https://codesandbox.io/s/40jvz6j590
reactjs materialize
I am new to ReactJS. So I have a straight forward question.
I have used materialize cdn, included in index.html. But when I try to initialize it in my component it says 'M' not defined. Where should I initialize the same.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root"></div>
</body>
</html>
My component looks something like this
import React from "react";
class Dashboard extends React.Component {
componentDidMount() {
document.addEventListener("DOMContentLoaded", function() {
var elems = document.querySelectorAll(".carousel");
var instances = M.Carousel.init(elems, options);
});
}
}
export default Dashboard;
CodeSandbox link: - https://codesandbox.io/s/40jvz6j590
reactjs materialize
reactjs materialize
asked Dec 27 at 13:35


Someindra Singh
162
162
1
Try react-materialize.github.io
– Boy With Silver Wings
Dec 27 at 14:16
Thanks, now it works
– Someindra Singh
Dec 27 at 14:37
add a comment |
1
Try react-materialize.github.io
– Boy With Silver Wings
Dec 27 at 14:16
Thanks, now it works
– Someindra Singh
Dec 27 at 14:37
1
1
Try react-materialize.github.io
– Boy With Silver Wings
Dec 27 at 14:16
Try react-materialize.github.io
– Boy With Silver Wings
Dec 27 at 14:16
Thanks, now it works
– Someindra Singh
Dec 27 at 14:37
Thanks, now it works
– Someindra Singh
Dec 27 at 14:37
add a comment |
1 Answer
1
active
oldest
votes
Well, if you are using it, you need to import it :D
import React from "react";
import {Carousel} from "react-materialize";
And here is how to use it https://react-materialize.github.io/#/carousel
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53945986%2finitializing-materialize-in-react-apps%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Well, if you are using it, you need to import it :D
import React from "react";
import {Carousel} from "react-materialize";
And here is how to use it https://react-materialize.github.io/#/carousel
add a comment |
Well, if you are using it, you need to import it :D
import React from "react";
import {Carousel} from "react-materialize";
And here is how to use it https://react-materialize.github.io/#/carousel
add a comment |
Well, if you are using it, you need to import it :D
import React from "react";
import {Carousel} from "react-materialize";
And here is how to use it https://react-materialize.github.io/#/carousel
Well, if you are using it, you need to import it :D
import React from "react";
import {Carousel} from "react-materialize";
And here is how to use it https://react-materialize.github.io/#/carousel
answered Dec 27 at 14:23
José Santos
2610
2610
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53945986%2finitializing-materialize-in-react-apps%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
C,fJ7h1O 3cZ22revqiNA yhvY6qWGw2fX,j96x44d34,A9aOplYze qkZI8RDZC,q,aHwgVvsqrUKRQ4J HNtCdiMpZQVInXL6MM 01,X7
1
Try react-materialize.github.io
– Boy With Silver Wings
Dec 27 at 14:16
Thanks, now it works
– Someindra Singh
Dec 27 at 14:37