Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Apr 08 06:49
    rnd2442 synchronize #1098
  • Apr 07 22:58
    samroberton commented #1099
  • Apr 07 10:06
    alextrastero commented #1099
  • Apr 07 03:34
    samroberton edited #1099
  • Apr 07 03:31
    samroberton opened #1099
  • Apr 06 21:00
    solomon23 synchronize #1097
  • Apr 06 20:47
    solomon23 synchronize #1097
  • Apr 06 12:51
    rnd2442 edited #1098
  • Apr 06 12:51
    rnd2442 edited #1098
  • Apr 05 14:58
    rnd2442 synchronize #1098
  • Apr 05 13:53
    rnd2442 opened #1098
  • Apr 04 23:44
    solomon23 synchronize #1097
  • Apr 04 23:20
    solomon23 opened #1097
  • Apr 04 10:16
    alextrastero closed #1094
  • Apr 04 10:16
    alextrastero commented #1094
  • Apr 04 10:09

    alextrastero on v3.8.3

    3.8.3 (compare)

  • Apr 04 10:09

    alextrastero on fix-type-publishing


  • Apr 04 10:09

    alextrastero on master

    ts: fix types file naming ts: add copy-files task to pack… update-changelog and 4 more (compare)

  • Apr 04 10:09
    alextrastero closed #1096
  • Apr 04 10:08
    alextrastero opened #1096
Glory Katende
@alextrastero That was my bad 😪 , I've added the missing dependency and everything is working now. thanks a lot
Zeia Soroush
hello.i use <TimePicker /> but selected time not show. i try onchange const onChangefunc = (hour, minute) => {
setState({ hour, minute });
Harel Tussi
how can i style components myself ?
Leo Tejeda
Autocomplete component how do i pass API Call data to component
<Autocomplete options={{ data: { 'Gus Fring': null, 'Saul Goodman': null, 'Tuco Salamanca': 'https://placehold.it/250x250' } }} placeholder="Insert here" />
Don't understand the documentation
                            onAutoComplete: {this.state.movies.map((movie.index) => {
                              <li key={index} className="collection-item"><img style={{height:30,width:30}} src={movie.Poster} alt="movie image"/> {movie.Title}</li>)}
                          placeholder="Search Movies"/>
This doesn't work
Kyle Pfromer
Hello, I was wondering if a Card component's Title property could be updated so that it can accept a JSX element function return value. Example:
<Card title={() => <>Custom Title With JSX</>}>
Anyone know how radio buttons work?
specifically how to arrange them vertically in a column instead of horizonally

Dropdown example from http://react-materialize.github.io/react-materialize/?path=/story/javascript-dropdown--default throws error ReferenceError: M is not defined from node_modules/react-materialize/lib/Dropdown.js:67

exact same code as in example

this is also throwing the same error (using the Dropdown part only of course)
I have "react-materialize": "^3.3.1" installed
Vangelis Garaganis
hi, I cannnot set up react materialize on my create react app
Maria Sanchez
@SharePointPro I have the same problem yet. Do you have a solution now?
Hi guys, ive just updated from react-materizlie beta, and I'm getting this error in my card:
Warning: React does not recognize the closeIcon prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase closeicon instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Warning: React does not recognize the revealIcon prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase revealicon instead. If you accidentally passed it from a parent component, remove it from the DOM element.
How to configure with Next.js? Thanks in advance
Davis Jones
Howdy. When using the tooltipOptions feature of the FAB Component, I'm getting this warning via the linter:
Warning: React does not recognize the tooltipOptions prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase tooltipoptions instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Have y'all had this problem? Anyone know a fix?
Davis Jones
Howdy friends. Just a quick tip / workaround. When using FABs with buttons used to modify text (I'm using the FAB to trigger inline text styles), on first click the buttons won't trigger your function. So, instead of using the onClick={} method in the <Button>, use onMouseDown={}, and your function trigger properly.
Hi, I'm having difficulties setting up react-materialize with react typescript. Has anyone experience setting it up with typescript?
Alexander Odell
Hi @Ale763, i'm afraid we don't have type support yet, please feel free to contribute :)
Quai Wentt
I want to use Toasts to send notifications and error messages to users ... but from the documentation it seems the only way to use them is to put a Toast component on the page, which provides a button they can click to generate the message. Am I missing something? I want the toast to show up upon success of an api call, not upon click.
Quai Wentt
the answer is window.Materialize.toast('Im a toast yay', 4000); for anyone who searches and finds this
Davis Jones
Hey @Qlwentt I went with Notisnack for my toasts https://www.npmjs.com/package/notistack
on iOS devices, my <Select> and <Dropdown> components aren't working correctly, and they work correctly on all other devices / browsers. Basically, they don't seem to select properly, though they do display properly. Related, I think: (1) Dogfalo/materialize@c0da340 (2) Issue on SO: https://stackoverflow.com/questions/60494492/react-web-app-routing-works-on-desktop-incl-mobile-dev-view-but-not-on-mobil
Has anyone been able to solve this / run into this? ----^
Davis Jones
Offering $50 (paid via PayPal) to anyone who can fix this ^^^ issue and submit a PR that Alex approves
Davis Jones
has anyone been able to get the <Select /> with multiple options working?
Alexander Odell
Hi @ydax please create an issue on the repo where we can keep track of what's not working :)
Davis Jones
Cool. Opened both of these as issues @alextrastero. Appreciate the work you're doing on this, and will continue contributing going forward.
Jaden Wang
I'm having trouble adding the materializejs into my gatsby
I've managed to get the materializecss into the header using react-helmet but I'm having issues actually linking the materializejs into it, not too sure whats going on with <script src="path/to/your/bundle.js"></script>
Gonzalo Martinese
Anuj Aggarwal
Hello everyone
I am using Collapsible with popout, and defaultExpanded to true
If I change the Collapsible Item's children while it is already open, it does not display any items then untill I click to close and then reopen the collapsible item
Anuj Aggarwal
This happens if there is a key given to Collapsible items, which changes when new Collapsible items are made
This is the minimal code I could make to reproduce the problem:
Alexander Odell
@here if anyone is looking into learning a bit of typescript or knows already and wants to help us out , we are adding type definition for the components
I've added a label typescript to the issues so you can spot them out https://github.com/react-materialize/react-materialize/labels/typescript
Sample implementation is in Autcomplete.d.ts
Anuj Aggarwal
Hello, is it possible to make images in Cards round? In particular, to give a className to image in CardTitle?
Luis Felipe Aguilar Pereda
is there a site qhere teach to change the color?
Alexander Odell


      <a key="1" href="#">This is a Link</a>
    header={<CardTitle image="https://materializecss.com/images/sample-1.jpg">Card Title</CardTitle>}
    Here is the standard card with an image thumbnail.

The header prop is where the image is stored, here you can add any node with any className to make it round