material-react-js

Material React is an implementation of Material Components for the web using React.

Please use the appropriate verion for your environment.

It suports following components:

• MDCButton component
• MDCCheckbox component
• MDCDataTable component
• MDCDialog component
• MDCIconButton component (Icon button & Icon button toggle)
• MDCRadio component
• MDCSelect component
• MDCSnackbar component
• MDCTab component
• MDCTabBar component
• MDCTextField component

Basic Usage

Installation

npm install react react-dom material-react-js

You must also install the appropriate MDC components for the component you are using. For example, to use the Button component, MDCButton must also be installed as follows:

npm install @material/button

Styles

The style is the same as that of the MDC-web.

@use "@material/button/mdc-button";

See documents of MDC-web for details.

React Components

Components are used as follows:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Button, TextField } from 'material-react-js';

function MyForm(props) {
    const [name, setName] = useState('');
    const [address, setAddress] = useState('');
    function onNameChange(event) {
        setName(event.target.value);
    }
    function onAddressChange(event) {
        setAddress(event.target.value);
    }
    function onSubmit() {
        ...
    }
    return (
        <form onSubmit={onSubmit}>
            <TextField label="name" required={true} onChange={onNameChange}/><br/>
            <TextField label="address" onChange={onAddressChange}/><br/>
            <Button label="submit"/>
        </form>
    );
}

ReactDom.render(<MyForm/>, document.getElementById('container'));