kradio3/react-mdc-web

Material Design Components for React

Material components for React

React components based on styles from Material Design Components Web project. Components are written in React.js. Doesn't use MDC foundation classes.

Installation

From CDN

<script src="https://unpkg.com/react-mdc-web/out/react-mdc-web.js"></script>

From package manager

npm i --save react-mdc-web

Theming

Default theme

• Include CSS with default theme into HTML page

  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/material-components-web.min.css">

• Or import it into JS/JSX file

  // MyApp/index.js
  import 'material-components-web/dist/material-components-web.min.css';

Custom theme

Override default theme colors with Sass or with CSS Custom Properties, just follow these guides:

• Changing the theme with Sass
• Changing the theme with CSS Custom Properties

Usage

import React, { Component } from 'react'
import {Card, CardHeader, CardTitle, CardText, CardActions, Button} from 'react-mdc-web/lib';

class MyComponent extends Component {
  render() {
    return (
        <Card>
          <CardHeader>
            <CardTitle>
              Title goes here
            </CardTitle>
          </CardHeader>
          <CardText>
            Lorem ipsum dolor sit amet, sint adipiscing ius eu
          </CardText>
          <CardActions>
            <Button compact>Save</Button>
            <Button compact accent>Remove</Button>
          </CardActions>
        </Card>
    );
  }
}

More samples could be found on the Documentation Site

Contribution & Local Development Guide

1. create parent folder react-mdc-web-dev
2. clone/fork react-mdc-web inside the react-mdc-web-dev folder
3. create app for testing (for example: git clone https://github.com/kradio3/react-mdc-web-showcase)
4. should now have folder with react-mdc-web-showcase and react-mdc-web folders inside of it.
5. cd react-mdc-web-showcase
6. npm rm --save-dev react-mdc-web
7. npm i --save-dev ../react-mdc-web
8. npm i --save-dev material-components-web
9. npm start
10. cd ../react-mdc-web
11. npm run watch

License

MIT, see LICENSE for details

react-mdc-web's Issues

Change themes

I've read this about theming in MDC:
https://github.com/material-components/material-components-web/blob/master/docs/theming.md#step-3-changing-the-theme-with-sass

I want to change the whole application style, how can I do that using this project?

Grid / Cells don't seem to behave as expected

I would expect this two components to lead to the same results :
code using react-mdc-web
code using mdc classes

However in practice the code using react-mdc-web just puts everything vertically (screenshot), while code using mdc classes work as expected, the elements are placed horizontally (screenshot).

Multiline textfield

Implement Select component

https://github.com/material-components/material-components-web/tree/master/packages/mdc-select

Recommended way to access native elements

I'd like to use native Constraint validation and be able to call checkValidity and reportValidity methods on individual inputs.

For that I need to access native elements like input , textarea and so on.

Using a ref attribute on a react-mdc-web element doesn't work as it points to react-mdc-web component and ref attribute is not being passed further using { ...otherProps } (I recall this is a react constraint).

What about adding special attribute that will translate to ref on native element, like so:

<TextField
  nativeRef={ el => this.nativeInput = el }
/>

implementation in Textfield/Input.js could be

const Input = ({ multiline, nativeRef, ...otherProps }) => {
  const type = multiline ? 'textarea' : 'input';
  return createElement(type, { className: ROOT, ref: nativeRef, ...otherProps });
};

Is it ready for production purposes?

Many thanks for this project, I'm just curious if it can be used for production purposes.

Where to write the <script/> required to run "lastRowFixedOnly" in Toolbar of mdc?

I am stuck as to lastRowFixedOnly requires a javascript to be run in order to make it work. Where should I write it? While defining the Component ToolBar, I wrote it in componentDidMount method but it gives me an error of mdc is not defined.

import React from "react";
import Toolbar from "react-mdc-web/lib/Toolbar/Toolbar";
import ToolbarRow from "react-mdc-web/lib/Toolbar/ToolbarRow";
import ToolbarSection from "react-mdc-web/lib/Toolbar/ToolbarSection";
import ToolbarTitle from "react-mdc-web/lib/Toolbar/ToolbarTitle";

export class Header extends React.Component{
  componentDidMount() {
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.innerHTML = "var toolbar = mdc.toolbar.MDCToolbar.attachTo(document.querySelector('.mdc-toolbar')); toolbar.fixedAdjustElement = document.querySelector('.mdc-toolbar-fixed-adjust');";
  document.body.appendChild(s);
  }
render(){

return(

  <Toolbar fixed fixedLastRowOnly>
  <ToolbarRow>
  <ToolbarSection>
  <h1>This is row 1</h1>
  </ToolbarSection>
</ToolbarRow>
 <ToolbarRow>
    <ToolbarSection>
    <ToolbarTitle>Title</ToolbarTitle>
   </ToolbarSection>
    </ToolbarRow>
    <ToolbarRow>
    <ToolbarSection>
    <ToolbarTitle>Title</ToolbarTitle>
  </ToolbarSection>
    </ToolbarRow>
  </Toolbar>
);
}
}

How do I use this this plugin with react typescript ?

I would like to use this plugin in my project. But it's not supported typescript.

Issue using Textfield with redux-form

Using Textfield with redux-form generates this issue

the first one is the component without redux-form and the second is using redux-form.
when component lose the focus and has data the floatingLabel bug appears.

Do you have a complete Textfield props list somewhere?

Menu: Cannot read property applyTransitionDelays() of undefined

This seems to be happening inside componentWillReceiveProps in DelayedItems where it returns this.applyTransitionDelays in setState. Maybe there's a different way of referencing applyTransitionDelays?

Add showcase project

As user, I want to download an example showcase project so that I can see how I can use the library in my own projects.

Additionally, would be interesting to see:

• how to apply theming
• how to re-use SASS (mixins/vars/etc) from the mdc
• generally, a simple showcase of components, if possible

Thank you in advance!

Icon inside a textfield

Hello,

I try to set an icon inside a textfield

In the material-components-web com official documentation, it's supported but how to do it with react-mdc-web ?
https://github.com/material-components/material-components-web/blob/master/demos/textfield.html

The code below do the job
<div id="tf-box-leading-example" class="mdc-textfield mdc-textfield--box mdc-textfield--with-leading-icon" data-demo-no-auto-js> <i class="material-icons mdc-textfield__icon" tabindex="0">event</i> <input type="text" id="tf-box-leading" class="mdc-textfield__input custom-textfield-input"> <label for="tf-box-leading" class="mdc-textfield__label">Your name</label> <div class="mdc-textfield__bottom-line"></div> </div>

Drawer has stopped working on my site

Hi,

Without changing anything for months the Drawer component doesn't really work anymore.

I have simplified to the example on your site to see if the issue was something I did, so this is what I have:
renderFullPage = () => { return ( <div> <Button raised onClick={() => { this.setState({isOpen: !this.state.isOpen}) }} > Show drawer </Button> <Drawer open={this.state.isOpen} onClose={() => { this.setState({isOpen: false}) }} > <DrawerHeader> <DrawerHeaderContent> Directions </DrawerHeaderContent> </DrawerHeader> <DrawerContent> <Navigation> <a href='#' selected><Icon name='directions_bus'/>Bus</a> <a href='#'><Icon name='directions_railway'/>Railway</a> <a href='#'><Icon name='directions_bike'/>Bike</a> </Navigation> </DrawerContent> </Drawer> </div> ); };

This display the drawer into the page, it's not hidden and the button doesn't really do anything.

Anyone else experiencing this?

Update sample import in https://kradio3.github.io/react-mdc-web/

in documentation from your website, the sample to import react-mdc-web is incorrect

in your home

bug on this ligne
import {Card, CardHeader, CardTitle} from 'react-mdc-web';

should be :
import {Card, CardHeader, CardTitle} from 'react-mdc-web/lib';

Ability to style Textfield elements using inline styles

See #57.
For <Textfield> there is a similar (but not identical) issue. "...otherProps" are put on the <input> element, and not on the <div> (Field) element. While I see the rationale for this (very often you would like to push properties to the input element, as this is the one which interacts with the user), this precludes us from styling the Textfield element as a whole. For example, how am I supposed to make it occupy 100% width? Perhaps, I'm missing the elephant here...

Implement Switch component

https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch

Expand Textfield control and options

I may have missed something but it does not seem Textfield component allows control of input validation e.g.

<Textfield
  value={this.props.username}
  helptext="Username contains illegal characters"
  />

The validation seems restricted to the element's built in validations rather than by the component.

Textfield component's helptext property has issues with the component's inner this.focus when passed dynamic values. This causes inputs to shift focus.

I am unsure whether these aspects were intended or a mistake on my part. I am very unexperienced so please let me know of any issues on my part.

Keep up the great work!

Make it so you can install separate components

(Nice project btw :) )
It'd be cool if you could install components separately (like mdc's npm install --save @material/button), if that would be possible (in any way) it'd be amazing.

Implement Menu component

TextField component doesn't know when input element has value and moves label incorrectly back into input field area

I feel like I should be able to use a Textfield component without having to save state and manage onclick and other values.. something like

<Textfield name="EMAIL" floatingLabel="Your email" />

and have it work properly as an input element would. However, react-mdc-web textfield components seem to require a 'value' element to be passed to recognize whether state has changed or not.

I believe this should be easily inferable from the contents of the native input element.

You seem to currently only be getting the value of the input element from props, which means you're tightly coupled to the state management and rendering tree of parent elements. As a styling sort of framework, I was expecting that you would work as a more native sort of element.

It looks like just a few tweaks to https://github.com/kradio3/react-mdc-web/blob/master/src/Textfield/Textfield.js#L48-L50 and https://github.com/kradio3/react-mdc-web/blob/master/src/Textfield/Textfield.js#L61-L74 should solve this issue for any future users...

Would you accept a pull request resolving this issue so that it still works as it does but also works as a more self-contained native component as well?

[Checkbox] Custom className overwrite default className.

Hey hi.

That's not something critical, but when you are using Checkbox component and send className into it:

<Checkbox
    className="mdc-checkbox--theme-customname"
    onChange={({ target: { checked } }) => this.setState({ rememberMe: checked })}
    checked={this.state.rememberMe}
/>

It overwrites default mdc-checkbox__native-control checkbox class name.
https://github.com/kradio3/react-mdc-web/blob/master/src/Checkbox/Input.js#L10

MenuItem with Link

It could be that I'm not completely understanding this. I'm not able to add a link to a MenuItem using the following (based on material-ui approach):

<MenuItem
  containerElement={<Link to="/about" />}
  primaryText="About Page"
/>

Is this something that is not supported by react-mdc-web/MenuItem? If not, do you plan to add support to this? Thanks in advance.

Module not found: Error: Can't resolve '@material/menu/dist/mdc.menu.min.css' in '*/node_modules/react-mdc-web/lib/Menu'

I ran into this error while following the examples from the README. I worked around the problem by changing the line in lib/Menu/index.js from

require('@material/menu/dist/mdc.menu.min.css');

to

require('material-components-web/dist/material-components-web.min.css');

I'm pretty sure this isn't the right thing to do (I'm very new at this). Does react-mdc-web need to add @material to its dependencies?

I've put up a reproducer at https://github.com/jhjaggars/react-mdc-web-repro.

Halo doesn't disappear after click switch.

For example:

Need click at other place to make halo disappear:

Can reproduce on (chrome 60)
https://kradio3.github.io/react-mdc-web/components/switch/

drawer on the right

Hello guys,

when I set mdc-temporary-drawer--right on Drawer component, it doesn't seem to work. I was expecting to display the drawer on the right side.

<Drawer
        className="mdc-temporary-drawer--right"
        open={this.state.isOpen}
        onClose={() => {
          this.setState({ isOpen: false });
        }}
      >
</Drawer

Example of Webpack configuration?

I'm struggling to implement this package and material-components-web properly with Webpack 2. Do any of you use it and could provide an example config that imports the mdc-web Sass files so they can be themed?

Here's what I think are relevant parts of my config:

var webpackConfig = module.exports = {
  context: path.resolve(__dirname, '..'),
  entry: {
    'main': [
      './src/theme/main.scss',
      './src/client.js'
    ]
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          }, {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 3,
              sourceMap: true,
              localIdentName: '[local]___[hash:base64:5]'
            }
          }, {
            loader: 'autoprefixer-loader',
            options: {
              browsers: 'last 2 version'
            }
          }, {
            loader: 'resolve-url-loader',
          }, {
            loader: 'sass-loader', // compiles Sass to CSS
            options: {
              outputStyle: 'expanded',
              sourceMap: true,
              includePaths: ['../src', '../node_modules', '../node_modules/@material/*']
                .map(d => path.join(__dirname, d))
                .map(g => glob.sync(g))
                .reduce((a, c) => a.concat(c), [])
            }
          },
        ],
      }
    ]
  },
  resolve: {
    modules: [
      'src',
      'node_modules'
    ],
    extensions: ['.json', '.js', '.jsx', '.scss']
  }
};

and I start my main.scss with this:

$mdc-theme-primary: #4a90e2;
$mdc-theme-accent: #f22745;
$mdc-theme-background: #fff;
@import '~material-components-web/material-components-web.scss';

All my app scss files load fine, but the material-components-web import doesn't seem to work at all but also doesn't throw any errors.

If I add 'material-components-web/dist/material-components-web.min.css' to entry:main then it works but then I'm obviously unable to change the theme as easily so that seems wrong. What should I do here?

material-components-web > 0.29 likely breaks card demo at docs/.../CardPage

I encountered a card layout style issue in my use of react-mdc-web suggesting that by https://github.com/material-components/material-components-web/blob/master/CHANGELOG.md#0.30.0, card layouts are no longer supported as used at https://github.com/react-mdc/react-material-components-web/tree/develop/docs/src/js/pages/CardPage.

Scrolling Tabs

Hi guys,

Anyone successfully included scrolling tabs?

Thanks.

Cannot get Textfields values to work

Nevermind. make sure to use components "extending Component" declaration

Implement Tab Component

https://github.com/material-components/material-components-web/tree/feat/mdc-tabs/packages/mdc-tabs

Way to specify temp drawer pop out side?

Can't seem to find any reference to specifying a side for the drawer to pop out of. Wondering if we could get a left/right boolean prop option, open to making pull request.

CardTitle unconditionally uses the mdc-card__title--large style

mdc-card__title--large is described here as:

mdc-card__title--large An option for the title, to make it larger.

Well, I want to have the flexibility to not make it larger. I think this deserves a property in the CardTitle props object.

Full support for material-components-web ?

This library looks really promising so far. Definitely the best react implementation of material-components-web I could find. I would like to use this library for a production web app. Are you planning on fully implementing and supporting all the m-c-w components? Any idea how long you will be supporting it for? (As an open-source creator myself, I don't want to assume you're fully committed to this project!)

Looking through your project, I see it's almost complete, just a few are missing:

• mdc-animation
• mdc-auto-init
• mdc-base
• mdc-button (missing ripple)
• mdc-card
• mdc-checkbox
• mdc-drawer
• mdc-dialog
• mdc-elevation
• mdc-fab
• mdc-form-field
• mdc-grid-list
• mdc-icon-toggle
• mdc-layout-grid
• mdc-list
• mdc-menu
• mdc-radio
• mdc-ripple
• mdc-rtl
• mdc-select
• mdc-snackbar
• mdc-switch
• mdc-textfield (missing advanced states)
• mdc-theme
• mdc-toolbar
• mdc-typography

Add a quick way to make one css reference to another (reassign style to another) ?

Hi,

I am facing a problem about seleted style of navigation, in reactjs (but I think feature may be very common)

The official example is:

<Drawer permanent>
  <DrawerSpacer>
    Directions
  </DrawerSpacer>
  <Navigation>
    <a href='#' selected><Icon name='directions_bus'/>Bus</a>
    <a href='#'><Icon name='directions_railway'/>Railway</a>
    <a href='#'><Icon name='directions_bike'/>Bike</a>
  </Navigation>
</Drawer>

---

I replace a with NavLink :

<Drawer permanent style={{
  "height": "inherit",
  "minHeight": "100%"
}}>
  <DrawerSpacer>
    Corpus
  </DrawerSpacer>
  <Navigation>
    <NavLink to={'/annotator'}><Icon name='insert_chart'/>Articles</NavLink>
    <NavLink to={'/'}><Icon name='library_books'/>Viewer</NavLink>
    <NavLink to={'#'}><Icon name='description'/>Viewer</NavLink>
  </Navigation>
</Drawer>

NavLink is made by { Link } from 'react-router' :

import React, { Component } from 'react';
import { Link } from 'react-router'

class NavLink extends Component {
  render() {
    let isActive = this.context.router.isActive(this.props.to, true);
    let className = isActive ? "active" : "";

    return (
      <li className={className}>
        <Link {...this.props}/>
      </li>
    );
  }
}

NavLink.contextTypes = {
  router: React.PropTypes.object
};

export default NavLink;

Since react-router 's Link doesn't accept a property named seleted, I have to apply the
[selected] style to .active .

I only know basic sass, just wonder is there any quick way to do something like

.active = Drawer.Navigation[selected]

to reassign the style.

Or, should I post such request to https://github.com/material-components/material-components-web ?
I am not sure this should be react level or sass level.

Add support for text node Fab children

Currently you can't add a text node as the Fab's content, only an icon. It would be nice if you could do that. Even with images if it's possible

RadioGroup children fails if Radio options are mapped from array.

Just wondering if anyone has any suggestions otherwise I can work on a solution.
Code and comment here.
4748f71#commitcomment-22752373

test = []
<RadioGroup
                name="cpuBrand"
                onChange={({target: {value}})=>{this.setState({system: {cpu: {brand: value}}})}}
                value={this.state.system.cpu.brand}
              >
                {test.map(() => <Radio value="INTEL" >Intel</Radio>)}
</RadioGroup>

At the moment I get an error

Invalid prop 'children[0]' supplied to 'RadioGroup', expected 'Radio'

Why does my content hide behind the Toolbar?

@prakharrke #5 (comment)

TypeError: Cannot read property 'type' of null ( ListDivider2.default)

Hi, I want to make table by List, code as below

<List className="corpus-list">
    <ListItem >
      <Cell col={4}>name</Cell>
      <Cell col={4}>desc</Cell>
      <Cell col={4}>action</Cell>
    </ListItem>
    <ListDivider/>
    {
      corpusList && corpusList.map((c)=> [
        <ListItem key={c.name}>
          <Cell col={4}>{c.name}</Cell>
          <Cell col={4}>{c.desc}</Cell>
          <Cell col={4}> <Link to={corpusLink(c.id)} ><Icon name="keyboard_arrow_right"></Icon></Link> </Cell>
        </ListItem>,
        <ListDivider/>,
      ])
    }
</List>

got error:

Uncaught (in promise) TypeError: Cannot read property 'type' of null
    at eval (List.js:42)
    at mapSingleChildIntoContext (ReactChildren.js:107)
    at traverseAllChildrenImpl (traverseAllChildren.js:77)
    at traverseAllChildrenImpl (traverseAllChildren.js:93)
    at traverseAllChildren (traverseAllChildren.js:172)
    at mapIntoWithKeyPrefixInternal (ReactChildren.js:127)
    at Object.mapChildren [as map] (ReactChildren.js:149)
    at List (List.js:41)
    at eval (ReactCompositeComponent.js:306)
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)

But it is fine with :

<List className="corpus-list">
    {
      corpusList && corpusList.map((c)=> [
        <ListItem key={c.name}>
          <Cell col={4}>{c.name}</Cell>
          <Cell col={4}>{c.desc}</Cell>
          <Cell col={4}> <Link to={corpusLink(c.id)} ><Icon name="keyboard_arrow_right"></Icon></Link> </Cell>
        </ListItem>,
        <ListDivider/>,
      ])
    }
</List>

How to add regular expression pattern for text field

Hi I need to add regular expression pattern for text input field, how can I add it?

Does react-mdc-web support input type of file for file uploads like images?

Does react-mdc-web support input type of file for file uploads like images?

Implement Linear progres

docs: https://material.io/components/web/catalog/linear-progress/
source: https://github.com/material-components/material-components-web/tree/master/packages/mdc-linear-progress

Available since material-components-web v0.12.0

Implement typography

It turns out that I was working on the exact same library. Even the coding and syntax conventions were almost identical. If you want to have a look, here is my implementation of mdc-typography.

import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';

class Typography extends Component {
  static propTypes = {
    className: PropTypes.string,
    tag: PropTypes.string,
    display4: PropTypes.bool,
    display3: PropTypes.bool,
    display2: PropTypes.bool,
    display1: PropTypes.bool,
    headline: PropTypes.bool,
    subheading2: PropTypes.bool,
    subheading1: PropTypes.bool,
    body2: PropTypes.bool,
    body1: PropTypes.bool,
    caption: PropTypes.bool
  }

  static defaultProps = {
    tag: 'h1'
  }

  get className() {
    const propClassNames = ['display4', 'display3', 'display2', 'display1', 'headline', 'subheading2', 'subheading1', 'body2', 'body1', 'caption'];
    return propClassNames
      .map(className => ({
        ['mdc-typography--'+className]: this.props[className]
      }))
      .reduce((prev, curr) => ({...prev, ...curr}), {});
  }

  render() {
    const {tag, className, ...otherProps} = this.props;
    return (
      <this.props.tag
        className={classnames(this.className, className)}
        {...otherProps}
      >
      </this.props.tag>
    );
  }
}

export default Typography;

Remove css require in Menu

Some configurations can't require("*.css"). The only files with this are Menu/index.js and defaultTheme.js. I deleted that line and there doesn't seem to be any problem. Maybe we can remove it?

Checkbox leaves blue circle after checking it and moving the cursor

In Chrome 58 (on MacOS and Windows) there is a bug with the Checkbox.
If you check it, uncheck it and then move the mouse away, the checkbox still stays highlighted with the blue circle.

Under Safari and Firefox this works fine, it seems to be only chrome.

Why do you not use the material-components-web JS?

@kradio3, Why do you not use the Google-supported JS files for material-components-web components? The material-components-web repo provides examples of how to integrate their JS into React components. Not criticizing the decision to not use their JS, just wondering what your thought process was.

Ability to style Dialog instances using inline styles

Looking at code https://github.com/kradio3/react-mdc-web/blob/master/src/Dialog/Dialog.js
line 63, "... otherProps" seem to be placed on the <aside> element.

Is this really useful? What other properties would the user want to put on the aside element?

If we would like to e.g. style the Dialog with min-width/min-height, we currently cannot do this as these do not have the desired effect when put on the <aside> element. Shouldn't you assign "...otherProps" on the <div> element starting on line 65 instead?

is the project still maintained ?

Add background color prop on FAB

Add background color prop on the floating action button.
I made a functional component for this:

function ColoredFab(props) {
    return (
        <Fab style={{backgroundColor: props.color}} {...props}/>
    );
}

But it would be nice to see this implemented.

Implement Grid-list component

https://github.com/material-components/material-components-web/tree/master/packages/mdc-grid-list