Material design for react, powered by materializecss

Overview

React Materialize

Join the chat at https://gitter.im/react-materialize/react-materialize npm version code style: prettier

react-materialize

Material design components for react, powered by materializecss.

Install

npm install [email protected]
npm install react-materialize

Use

HTML Setup (from materializecss)

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="path/to/materialize.css">
  </head>
  <body>
    <script src="path/to/your/bundle.js"></script>
  </body>
</html>

Javascript

import 'materialize-css';
import { Button, Card, Row, Col } from 'react-materialize';
Note

materialize-css exposes css via style field in package.json, if you have another tool for CSS that identifies this field you can remove the import from index.html.

Docs && Examples

See documentation for live examples. Try out the boilerplate.

How does it compare to X.Y.Z?

The main goal of this project is to provide react component for materializecss, at the current stage, I am trying to implement all possible widgets that are supported by materializecss. Please create an issue on github if you find you desired component is not available.

There are other material design components for react.js, e.g. material-ui, which is more mature and popular than this one. The main advantage of this project over e.g. material-ui is that it provides a grid system similar to react-bootstrap. Another advantage over material-ui is that react-materialize does not include css in the js - which can be cumbersome to some project's architecture.

Contributions

Yes, please!

We have a help-wanted label in the issues page for convenience

Deployment workflow

We are now using github actions. For every push, test action will run.

To publish a new version update the package version, update the change log and create a PR. Once merged to master push tags git push --tags and create a new release.

Support

This library is only a react wrapper around the awesome materializecss, if you or your company uses this library please support them, all this work requires time :) ✌️

Issues
  • 3.0.0 Button.js

    3.0.0 Button.js

    Description

    It closes react-materialize/react-materialize#583 (I hope :smile: )

    This PR updates Button component to work with materializecss 1.0.0-rc.2. It includes:

    • New class .btn-small
    • Now if your element has a class like .btn-large or.btn-small you no longer need the .btn class
    • A update of Button component docs (used materializecss new Button docs page as example)
    • A page for documenting Floating Action Button component (used materializecss new Button docs page as example)
    • A helper file called string-helper. It is used to captalize and add spaces to titles (for the navbar and header of the page). It was necessary since the Floating Action Component docs page had its title rendered as "FloatingActionPage" (in the header of the page and in the navbar)
    • A fix for Floating Action Button. Now it is initialized when fab prop is passed
    • A test for new class .btn-small

    There is some items I would like the opinion from the others contributors:

    • I have used materializecss docs as base for those changes in our docs. Was it ok?
    • What you think about my solution for nav items with more than one word (Floating Action Button)? Any sugestion of how it could be better?
    • The fix for Floating Action Button was valid? Is it ok to initialize the component the way I have done?
    • There is any other unit tests you guys want me to add?

    @petergarnaes, sorry but could you review this PR again? I have created a new clean branch. And thanks for helping me.

    Type of change

    • [x] Bug fix (non-breaking change which fixes an issue)
    • [x] New feature (non-breaking change which adds functionality)

    How Has This Been Tested?

    • Manual tests using the docs
    • Unit tests

    Checklist:

    • [x] I have commented my code, particularly in hard-to-understand areas
    • [x] My changes generate no new warnings
    • [x] I have not generated a new package version. (the maintainers will handle that)
    opened by onluiz 25
  • Added SideNav

    Added SideNav

    Hi guys! I wanted to get this thing going, so this PR is mainly to see if I'm moving in the right direction with this.

    Whats in this PR?

    • SideNav component
    • SideNavItem component
    • Added docs/example
    • Added first basic test (Will add more tests when the implementation is agreed on)

    What more?

    • Fixed tests (removed only and fixed eslint error in Parallax)
    • Upped eslint-plugin-promise version (got a missing peer dependency error)
    • Set babel-eslint as parser for eslint (If that is an issue please let me know)

    Questions:

    • The trigger is implemented in the same fashion as for example DropDown. I'm not sure if this is the way to go for this component as well. Are the trigger and the sidenav always rendered together?

    • I added right and closeOnClick as props for SideNav, but you can also supply them as options. Whats the preferred approach here? I thought it was convenient and clear if you can supply these things as props, but should I then also add the other options? And then skip options altogether?

    • I added a userview property to SideNavItem. Should that be a separate component or something? Should that be part of this PR in the first place?

    Thanks for any input!

    wip 
    opened by richmeij 23
  • Opening modals programatically?

    Opening modals programatically?

    I need to use a modal without having a specific trigger button, this this possible?

    To clarify my use case, if a user is logged in and tries to do something requiring login a modal with a registration/login form pops up in a modal, so I need to be able to trigger it programmatically as there are multiple possible triggers throughout the application

    opened by jordanwallwork 22
  • Add Select Component

    Add Select Component

    I will add test case later. And I will remove the select code in Input.js.

    codereview 
    opened by scarletsky 18
  • Unknown Props Warning in React 15.2

    Unknown Props Warning in React 15.2

    React 15.2 has been released. When I use react-materialize with react 15.2, I see some errors like:

    bundle.js:4005 Warning: Unknown prop `node` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
        in div (created by Row)
    
    bundle.js:4005 Warning: Unknown prop `s` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
        in div (created by Col)
    

    I hope this gets fixed soon :) Thank you.

    opened by velopert 17
  • Switching tabs programmatically

    Switching tabs programmatically

    Description

    I am not able to switch tabs programmatically using the jquery $("...").tabs("select_tab", "tab_id") method. My tabs id's are visible on the bottom left of the browser when hovering over them so I was able to confirm that they were right.

    I also tried giving a tab an explicit id prop but that doesnt work either.

    Is this not implemented?

    Thanks for helping out!

    bug help wanted 
    opened by ThatBrianDude 17
  • Javascript components are not working

    Javascript components are not working

    Hi All Can someone please help me with this issue? bundle.js:137057 Uncaught TypeError: $(...).dropdown is not a function at Dropdown.componentDidMount (bundle.js:137057) at bundle.js:127288 at measureLifeCyclePerf (bundle.js:127098) at bundle.js:127287 at CallbackQueue.notifyAll (bundle.js:54095) at ReactReconcileTransaction.close (bundle.js:132181) at ReactReconcileTransaction.closeAll (bundle.js:28008) at ReactReconcileTransaction.perform (bundle.js:27955) at ReactUpdatesFlushTransaction.perform (bundle.js:27942) at ReactUpdatesFlushTransaction.perform (bundle.js:19908) I have added js dropdown component in my react app I am stuck with this please do share your thoughts on it

    I tried with most of the JS components but it returns the same error.

    opened by harishrohokale 17
  • CollectionItem `href` property support

    CollectionItem `href` property support

    Idk how it could be handled for all items (item identification based on href prop). Anyways it work just fine for me, maybe this pull can be helpful to identify the problem.

    opened by linuxenko 15
  • material_select is not a function

    material_select is not a function

    Followed doc for installation:

    <script type="text/javascript"
            src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="bundle.js"
            type="text/javascript"></script>
    

    Trying to use Select in jsx, error material_select is not a function:

    import React from 'react';
    import { Button, Card, Row, Col, Input } from 'react-materialize';
    ....
    
    return (
    <Row>
    	<Input s={12} type='select' label="Materialize Select" defaultValue='2'>
    		<option value='1'>Option 1</option>
    		<option value='2'>Option 2</option>
    		<option value='3'>Option 3</option>
    	</Input>
    </Row>
    )
    

    Help.

    opened by fengxia41103 15
  • Collapsed Navbar seems to be broken in the latest version

    Collapsed Navbar seems to be broken in the latest version

    Its a possibility that the API has changed but I haven't found anything to support this.

    My Navbar is set up as follows (for example):

    return (
          <div className='navbar-fixed teal lighten-1'>
            <Navbar brand='OLIO' right data-role='navigation'
              className='teal lighten-1' options={{ closeOnClick: true }}>
              <NavItem className={this.getClassIfActive('/articles')}
                onClick={this.props.refreshAndBrowse}>
                <Icon left>view_list</Icon>
                <span>{t('BROWSE')}</span>
              </NavItem>
    )
    

    Previously when making the browser narrower the menum would collapse into:

    screenshot from 2017-08-22 15-11-02

    Which it still does, however when I click this I am no longer presented with my menu options, but the following:

    screenshot from 2017-08-22 15-11-55

    It looks possibly like the menu isn't being generated or dragged over?

    bug help wanted 
    opened by lloydwatkin 14
  • Broken SSR support likely regression of issue 1085

    Broken SSR support likely regression of issue 1085

    Description

    Likely regression of this https://github.com/react-materialize/react-materialize/issues/1085 issue or reintroduced in a separate component by a non-SSR compliment change/s.

    Steps to Reproduce

    1. start an empty next project
    2. follow install steps of the library
    npm install [email protected]
    npm install react-materialize
    
    1. include the library on the index page
    import 'materialize-css'
    import { Navbar, NavItem, Icon } from 'react-materialize'
    
    1. error message in next.js

    Expected behaviour: runs correctly in SSR on next.js

    Actual behavior:

    The following error is reported

    Server Error
    ReferenceError: window is not defined
    
    This error happened while generating the page. Any console logs will be displayed in the terminal window.
    Call Stack
    <unknown>
    

    Versions

    "materialize-css": "^1.0.0-rc.2", "react": "^16.14.0", react-materialize": "^3.10.0",

    opened by JoueBien 0
  • Bump url-parse from 1.4.7 to 1.5.3

    Bump url-parse from 1.4.7 to 1.5.3

    Bumps url-parse from 1.4.7 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Considering updated materializecss?

    Considering updated materializecss?

    Description

    Hello react-materialize team,

    So as you can see, the original repo in Dogfalo/materialize has not been updated since Oct 31, 2019 (ignoring the patreon updates). Because of that, we, the new materializecss team, decided to fork the repo which is available at materializecss/materialize.

    We recently (well, 4 months ago) released 1.1.0-alpha that's also available on the npm registry (https://www.npmjs.com/package/@materializecss/materialize)

    With that, I think you can abandon the Dogfalo/materialize, and switch to materializecss/materialize? 💭

    Thanks, Smankusors

    Versions

    react-materialize: 3.9.8 materialize-css: 1.1.0-alpha react: 17.0.2

    opened by Smankusors 2
  • Problems with Redux Form

    Problems with Redux Form

    Description

    DatePicker and TimePicker are not compatible with Redux Form as other Components

    Steps to Reproduce

    DateField.js

    import React, { Component } from "react";
    import "materialize-css";
    import { DatePicker } from "react-materialize";
    
    class DateField extends Component {
      render() {
        const {
          input,
          label,
          meta: { error, touched },
        } = this.props;
        return (
          <div>
            <label>{label}</label>
            <DatePicker {...input} style={{ marginBottom: "5px" }} />
            <div className="red-text" style={{ marginBottom: "20px" }}>
              {touched && error}
            </div>
          </div>
        );
      }
    }
    
    export default DateField;
    

    Form.js

    <Field
      key="datepicker"
      component={DateField}
      type="text"
      label="Pick Date"
      name="datepicker"
    />
    

    ...

    export default reduxForm({
      validate,
      form: "Form",
      destroyOnUnmount: false,
    })(SurveyForm);
    

    Expected behavior: Store data to redux from

    Actual behavior: Unable to store data to redux form correctly

    Versions

    react-materialize: 3.9.8 materialize-css: 1.0.0 react: 17.0.2 redux: 4.1.0 redux-form: 8.3.7

    opened by j151366 1
  • NavItem without active class

    NavItem without active class

    Description

    NavItem without the active class

    Steps to Reproduce

    1. install react-materialize, materialize-css
    2. Create NavBar and a NavItem with a className="active"

    Expected behavior: The active class on the <li> element (https://materializecss.com/navbar.html#active-label)

    Actual behavior: active class on the <a>

    Versions

    react-materialize: ^3.9.8 materialize-css: ^1.0.0-rc.2" react: ^17.0.2

    P.S: Related to issue #1138

    opened by tholeb 0
  • Fix: React peer dependency version

    Fix: React peer dependency version

    Description

    Updated the package.json to fix the react 17 peer dependency issue Fixes #1157 issue

    Type of change

    Please delete options that are not relevant.

    • [x] Bug fix (non-breaking change which fixes an issue)

    How Has This Been Tested?

    Unit tested using the scripts

    Checklist:

    • [ ] I have commented my code, particularly in hard-to-understand areas
    • [x] My changes generate no new warnings
    • [ ] I have not generated a new package version. (the maintainers will handle that)
    opened by BiswaViraj 4
  • Autocomplete onChange only works with user typing not clicking

    Autocomplete onChange only works with user typing not clicking

    Description

    The autocomplete works fine, but the onChange function only gets called when the user is typing, but when the user clicks an option it doesnt gets calle by the onChange

    Steps to Reproduce

    import React, { Component } from "react";
    import baseApi from '../../api/baseApi';
    import { Row, Col, Autocomplete } from "react-materialize";
    
    const contenido = {
      data: {
        "Gus Fring": null,
        "Saul Goodman": null,
        "Tuco Salamanca": null,
        "Pepe Grillo": null,
        "Otro mas": null,
      },
    };
    
    class AutocompleteFieldInput extends Component {
      muestraTest = (e) =>{
        console.log(e.target.value);
      }
      
      render() {
        return (
          <Row>
            <Col>
              <Autocomplete
                id="Autocomplete-1"
                options={contenido}
                title="Input Label"
                onChange= {this.muestraTest}
              />
            </Col>
          </Row>
        );
      }
    }
    
    export default AutocompleteFieldInput;
    

    Expected behavior:

    I expect to show the selected option in the autocomplete list when user clicks it

    Actual behavior:

    Actually it only logs the value while the user is typing, nothing when the user clicks one of the options although it completes the input

    Versions

    react-materialize: ^3.9.3 materialize-css: ^1.0.0-rc.2 react: ^16.14.0

    opened by Shaka-60hp 1
  • SideNav: Warning: Function components cannot be given refs

    SideNav: Warning: Function components cannot be given refs

    Description

    Rendering a SideNAv in a class component

    Steps to Reproduce

    class SideNavSunny extends Component{ render(){ return(

    <SideNav id="SideNav-10" options={{ draggable: true }} trigger={ } > <SideNavItem user={{ background: 'https://placeimg.com/640/480/tech', email: '[email protected]', image: 'static/media/react-materialize-logo.824c6ea3.svg', name: 'John Doe' }} userView /> <SideNavItem icon={cloud} > First Link With Icon Second Link Subheader Third Link With Waves
    ) } }

    Expected behavior: [What you expect to happen] No Warnings at all

    Actual behavior: [What actually happens] Warning: Function components cannot be given refs

    Versions

    react-materialize: 3.9.3 materialize-css: 1.0.0-rc.2 react: 16.14.0

    opened by Shaka-60hp 1
  • Button type property in Typescript

    Button type property in Typescript

    Description

    I can't seem to be able to use the type property for the Button component.

    Example use case: setting type to 'submit' for a form button

    Steps to Reproduce

    1. Set the property 'type' on Button to 'submit'

    Expected behavior: The 'type=submit' attribute assignment is passed down to the underlying button element.

    Actual behavior: Typescript compiler error:

    Type '{ children: string; node: string; style: { marginTop: string; }; type: string; }' is not assignable to type 'IntrinsicAttributes & ButtonProps & { children?: ReactNode; }'.
      Property 'type' does not exist on type 'IntrinsicAttributes & ButtonProps & { children?: ReactNode; }'.ts(2322)
    

    Versions

    react-materialize: ^3.9.3 materialize-css: ^1.0.0 react: ^17.0.1

    Temporary fix

    Add a field "type?:'submit' | 'reset' | 'button'" to ButtonProps in Button.d.ts

    opened by andrea-berling 0
  • Problems in combination with REDUX-FORM

    Problems in combination with REDUX-FORM

    Description

    Using REDUX-FORM props for Textinput componente are not correctlly passed or taken

    Steps to Reproduce

    1. Insert Field from REDUX-FORM with property name="whatever"
    2. add component property to Field as TextInput (component={TextInput})
    3. Inspect the rendered result

    Expected behavior: [What you expect to happen]

    pass name to the text input

    Actual behavior: [What actually happens]

    no name on the final rendered input

    Versions

    react-materialize: 3.9.3 materialize-css: 1.0.0-rc2 react: 16.14.0

    opened by Shaka-60hp 2
Releases(v3.10.0)
Owner
React Materialize
Material design for React
React Materialize
☄️React Material Admin is a React template built with Material-UI

React Material Admin — Material-UI Dashboard Template

Flatlogic 1.2k Nov 29, 2021
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Nov 20, 2021
React Bootstrap with Material Design - Powerful and free UI KIT

React Bootstrap with Material Design Built with React and Bootstrap 4. Absolutely no jQuery. 400+ material UI elements, 600+ material icons, 74 CSS an

MDBootstrap 1.2k Nov 23, 2021
Free and Open Source Admin for Tailwind CSS and React based on Google's Material Design.

Material Tailwind Dashboard React Material Tailwind Dashboard React is a free Admin Template based on two popular front-end technologies: Tailwind CSS

Creative Tim 34 Nov 20, 2021
React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

MDB 5 React React 17 & Bootstrap 5 & Material Design 2.0 UI KIT >> Get Started in 4 steps >> MDBReact 5 Demo 500+ material UI components Super simple,

MDBootstrap 1.2k Nov 23, 2021
A frontend framework for building admin SPAs on top of REST services, using React and Material Design.

admin-on-rest A frontend Framework for building admin applications running in the browser on top of REST services, using ES6, React and Material Desig

marmelab 400 Nov 20, 2021
React Material Design Icons – built with Pixo, Styled Components, and Styled System

React Material Design Icons Built with Pixo, Styled Components, and Styled System https://jxnblk.com/rmdi npm i rmdi // import icons individually for

Brent Jackson 132 Oct 19, 2020
Material Design component library for Mithril and React

Polythene Material Design component library for Mithril and React. Can be used as general-purpose component library that includes dialogs, cards, noti

Arthur Clemens 587 Nov 22, 2021
Stateless UI components for react that follow material design

Material Components Stateless UI components for react that follow material design. Introduction material-components is a library of React (15.0.0) use

Garth Williams 99 Sep 9, 2021
Essence - The Essential Material Design Framework

#[Essence] - The Essential Material Design Framework About Essence Essence is a CSS framework that implements the guidelines from Google Material Desi

Evo Forge 416 Oct 13, 2021
A customizable floating action button menu that follows material design

react-floating-button-menu A customizable floating action button menu Inspired by react-material-floating-button Install npm install --save react-floa

Alucard 36 Nov 15, 2021
Modular and customizable Material Design UI components for the web

Material Components for the web Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX

Material Components 15.9k Nov 29, 2021
Free React Typescript Admin Dashboard Template built with Material-UI

Tokyo Free White Typescript React Admin Dashboard Free React Typescript Admin Dashboard Template built with Material-UI This free and open source admi

Horia S 38 Nov 26, 2021
A simple and powerful Datatable for React based on Material-UI Table with some additional features.

A simple and powerful Datatable for React based on Material-UI Table with some additional features.

Mehmet Baran 3.2k Nov 24, 2021
CRUD Web React e Material UI

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Anderson 1 Nov 10, 2021
A Material-UI File Upload Dropzone

A Material-UI File Upload Dropzone

pandemicode.dev 1 Sep 18, 2021
Introduce users to your app with this Material-style carousel.

Material AutoRotatingCarousel So you wrote a great app and deployed it and everything. But how do you introduce new users to your app? Well, the Mater

Wertarbyte 425 Nov 21, 2021
Material style image with loading animation

Material UI Image Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern su

Wertarbyte 204 Nov 19, 2021
Material ripple effect. Ripples everything

react-ripples Material ripple effect, ripples everywhere Live Demo Attraction ✅ Zero dependencies ?? Tiny and blazing fast (Pure Component) ⚡ Typescri

Rocky Wu 179 Nov 11, 2021