UNPKG

rmwc

Version:

A thin React wrapper for Material Design (Web) Components

jamesmfriedman.github.io/rmwc/

jamesmfriedman/rmwc

76 lines (50 loc) • 3.37 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
[![CircleCI](https://circleci.com/gh/jamesmfriedman/rmwc/tree/master.svg?style=shield)](https://circleci.com/gh/jamesmfriedman/rmwc/tree/master) [![npm](https://img.shields.io/npm/v/rmwc.svg)](https://www.npmjs.com/package/rmwc) [![npm](https://img.shields.io/npm/l/rmwc.svg)](https://github.com/jamesmfriedman/rmwc/blob/master/LICENSE) [![Join the chat at https://gitter.im/react-material-web-components/Lobby](https://badges.gitter.im/react-material-web-components/Lobby.svg)](https://gitter.im/react-material-web-components/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) # RMWC - React Material Web Components A React (15 / 16) wrapper for the official Material Design (Web) Components v0.36.0 [https://jamesmfriedman.github.io/rmwc/](https://jamesmfriedman.github.io/rmwc/) Features: * [x] Uses Google's official material-components-web library * [x] Tested in all versions of React ranging from 15.5.x to 16.4.x * [x] First class Flow Type Support, no extra configuration needed * [x] First class Typescript support (Beta) * [x] Server side rendering support ## Recent updates MDC 36 is a simple upgraded containing mostly bugfixes and there are minimal breaking changes. View the changelog for detailed updates: [https://github.com/jamesmfriedman/rmwc/blob/master/CHANGELOG.md](https://github.com/jamesmfriedman/rmwc/blob/master/CHANGELOG.md) ## Goals * To create the thinnest, lightest, and spec compliant wrapper around Google Material Design Components for the Web [https://material.io/components/web/](https://material.io/components/web/) * To utilize the Foundation javascript classes and expose their api for consumption * To be as unobtrusive and sensible as possible. ## Installation Required steps * `npm i rmwc --save` or `yarn add rmwc` * [material-components-web](https://github.com/material-components/material-components-web) should be installed automatically as a peer dependency. Include `node_modules/material-components-web/dist/material-components-web.min.css` in your project via your method of choice (using a link tag, a css-loader, etc.). Optional steps * If you would like to use the default **Roboto font**: * add `<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />` * add the class `mdc-typography` to the body `<body className="mdc-typography">...</body>` * If you would like to use the **material-icons** font: * add `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">` * Add global settings by using the optional `<RMWCProvider />` component at the root of your project. See the 'Provider' section for more info. Additional information is available in the [Installation Guide](https://jamesmfriedman.github.io/rmwc/installation) ## Usage Read the docs on how to [Usage](https://jamesmfriedman.github.io/rmwc/usage) ## Why? Read the docs on [Methodology](https://jamesmfriedman.github.io/rmwc/methodology) ## About Breaking Changes Read the docs on [Methodology](https://jamesmfriedman.github.io/rmwc/methodology) ## To run the tests * On MacOS Sierra and higher, install watchman to fix a filesystem issue with Jest. `brew install watchman` * `npm test` ## To run the docs / contribute * `git clone https://github.com/jamesmfriedman/rmwc.git` * `cd rmwc` * `npm install` * `npm start`