Initializing materialize in react apps

Multi tool use
Multi tool use












1














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










share|improve this question


















  • 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














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










share|improve this question


















  • 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








1







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










share|improve this question













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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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














  • 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












1 Answer
1






active

oldest

votes


















0














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






share|improve this answer





















    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
    });


    }
    });














    draft saved

    draft discarded


















    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









    0














    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






    share|improve this answer


























      0














      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






      share|improve this answer
























        0












        0








        0






        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






        share|improve this answer












        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







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Dec 27 at 14:23









        José Santos

        2610




        2610






























            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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
            3LeBLCG6jPva0B5Mgne0Ra RudV,qEuYy1lXdCl6

            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas