Home

Version CI Status MIT License

material-react-js

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

Please use the appropriate verion for your environment.

material-react-js version React Material Conpornent for the Web
1.x 16.x (16.8 or above) 7.0
2.x 17.x 8.0
3.x 17.x 9.0
4.x 17.x 10.0

It suports following components:

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