Coder Social home page Coder Social logo

mattmichler / rmwc Goto Github PK

View Code? Open in Web Editor NEW

This project forked from rmwc/rmwc

0.0 1.0 0.0 28.87 MB

A React wrapper for Material Design (Web) Components

Home Page: https://jamesmfriedman.github.io/rmwc/

License: MIT License

JavaScript 94.56% HTML 1.13% CSS 4.31%

rmwc's Introduction

CircleCI npm npm Join the chat at https://gitter.im/react-material-web-components/Lobby

RMWC - React Material Web Components

A React (15 / 16) wrapper for Material Design (Web) Components v0.29.0 https://jamesmfriedman.github.io/rmwc/

Recent updates

MDC 0.29.0 has minimal impact on RMWC. The only breaking change is removal of the Select multiple component. If you were using the Select multiple component, guidance is to use a list with checkboxes, or manage your own component.

Goals

  • To create the thinnest, lightest, and spec compliant wrapper around Google Material Design Components for the 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 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

Usage

Read the docs on how to Usage

Why?

Read the docs on Methodology

About Breaking Changes

Read the docs on 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

rmwc's People

Contributors

jamesmfriedman avatar gideonflynn avatar alexeyraspopov avatar jetfault avatar jonvuri avatar ufomelkor avatar gitter-badger avatar

Watchers

Matt Michler avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.