react-material-components-webReact wrapper of Google's Material Components Web

联合创作 · 2023-09-24 13:13

React Material Components Web

License: MIT npm version Build Status

React wrapper of Material Components Web

Under Active Development

The project is under active development.

Every updates can contain breaking changes before 0.2.0.

We do not recommend you to use this library for produciton applications at this time.

Documentation

You can find documentation with live demo at https://react-mdc.github.io/

Features

  • Typed strictly with TypeScript

    You can access typing support by also using TypeScript

  • Stylesheet independent

    Since Material Components Web can be customized with scss, it does not depend on specific stylesheet. You can load your own stylesheet or a default one.

  • Each component packaged individually

    Like Material Components Web, You can access all components individually, under @react-mdc npm scope.

Getting Start

Install the library

$ npm install --save @react-mdc/typography

Import the stylesheet

<link type="text/css" href="/static/material-components-web.min.css" rel="stylesheet" />

Or load using webpack and scss-loader

my-mdc.scss

// My main Sass file.
$mdc-theme-primary: #9c27b0;
$mdc-theme-accent: #76ff03;
$mdc-theme-background: #fff;

@import "material-components-web/material-components-web";

app.js

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import "./stylesheets/my-mdc.scss";
import Main from './main.js';

ReactDOM.render(<Main />, document.getElementById('root'));

And import @react-mdc then give it a shot.

main.js

import * as React from "react";
import Typography from "@react-mdc/typography";

export default class Main extends React.Component<{}, {}> {
    render () {
        return (
            <Typography>
                <Typography.Title>
                    This is an example
                </Typography.Title>
                <Typography.Body2>
                    Hello world!
                </Typography.Body2>
            </Typography>
        );
    }
}

Setup for Development

Bootstrap

$ lerna bootstrap

Build

$ npm run build

Run Docs

$ cd docs
$ npm start

Watch for Changes and Build

$ npm run watch

Run Test

$ npm test

to watch

$ npm test:watch
浏览 5
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报