{"id":13766200,"url":"https://github.com/react-mdc/react-material-components-web","last_synced_at":"2025-05-10T21:33:12.387Z","repository":{"id":57138726,"uuid":"79624626","full_name":"react-mdc/react-material-components-web","owner":"react-mdc","description":"React wrapper of Google's Material Components Web","archived":true,"fork":false,"pushed_at":"2017-10-04T13:10:04.000Z","size":1132,"stargazers_count":179,"open_issues_count":18,"forks_count":15,"subscribers_count":17,"default_branch":"develop","last_synced_at":"2025-04-29T12:09:03.257Z","etag":null,"topics":["javascript","material-components","material-design","npm","react","typescript"],"latest_commit_sha":null,"homepage":"https://react-mdc.github.io/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-mdc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-21T04:55:00.000Z","updated_at":"2024-11-30T05:31:48.000Z","dependencies_parsed_at":"2022-08-31T15:42:03.154Z","dependency_job_id":null,"html_url":"https://github.com/react-mdc/react-material-components-web","commit_stats":null,"previous_names":["hardtack/react-mdcw","hardtack/react-material-components-web"],"tags_count":219,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-mdc%2Freact-material-components-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-mdc%2Freact-material-components-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-mdc%2Freact-material-components-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-mdc%2Freact-material-components-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-mdc","download_url":"https://codeload.github.com/react-mdc/react-material-components-web/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253404834,"owners_count":21903106,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","material-components","material-design","npm","react","typescript"],"created_at":"2024-08-03T16:00:52.551Z","updated_at":"2025-05-10T21:33:11.132Z","avatar_url":"https://github.com/react-mdc.png","language":"TypeScript","readme":"React Material Components Web\n=============================\n\n[![License: MIT](https://img.shields.io/github/license/mashape/apistatus.svg)](https://opensource.org/licenses/MIT)\n[![npm version](https://badge.fury.io/js/react-material-components-web.svg)](https://www.npmjs.com/package/react-material-components-web)\n[![Build Status](https://img.shields.io/travis/react-mdc/react-material-components-web.svg)](https://travis-ci.org/react-mdc/react-material-components-web)\n\n\nReact wrapper of [Material Components Web](\nhttps://github.com/material-components/material-components-web)\n\nUnder Active Development\n------------------------\n\nThe project is under active development.\n\nEvery updates can contain breaking changes before 0.2.0.\n\nWe **do not** recommend you to use this library for produciton applications at this time.\n\nDocumentation\n-------------\n\nYou can find documentation with live demo at https://react-mdc.github.io/\n\nFeatures\n--------\n\n*  Typed strictly with [TypeScript](http://typescriptlang.org)\n\n   You can access typing support by also using TypeScript\n\n*  Stylesheet independent\n\n   Since *Material Components Web* can be customized with scss,\n   it does not depend on specific stylesheet.\n   You can load your own stylesheet or a default one.\n\n*  Each component packaged individually\n\n   Like *Material Components Web*, You can access all components individually,\n   under [@react-mdc npm scope](https://www.npmjs.com/%7Ereact-mdc).\n\nGetting Start\n-------------\n\nInstall the library\n\n``` bash\n$ npm install --save @react-mdc/typography\n```\n\nImport the stylesheet\n\n``` html\n\u003clink type=\"text/css\" href=\"/static/material-components-web.min.css\" rel=\"stylesheet\" /\u003e\n\n```\n\nOr load using webpack and scss-loader\n\n`my-mdc.scss`\n``` scss\n\n// My main Sass file.\n$mdc-theme-primary: #9c27b0;\n$mdc-theme-accent: #76ff03;\n$mdc-theme-background: #fff;\n\n@import \"material-components-web/material-components-web\";\n\n```\n\n`app.js`\n``` javascript\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport \"./stylesheets/my-mdc.scss\";\nimport Main from './main.js';\n\nReactDOM.render(\u003cMain /\u003e, document.getElementById('root'));\n\n```\n\nAnd import *@react-mdc* then give it a shot.\n\n`main.js`\n``` typescript\n\nimport * as React from \"react\";\nimport Typography from \"@react-mdc/typography\";\n\nexport default class Main extends React.Component\u003c{}, {}\u003e {\n    render () {\n        return (\n            \u003cTypography\u003e\n                \u003cTypography.Title\u003e\n                    This is an example\n                \u003c/Typography.Title\u003e\n                \u003cTypography.Body2\u003e\n                    Hello world!\n                \u003c/Typography.Body2\u003e\n            \u003c/Typography\u003e\n        );\n    }\n}\n\n```\n\nSetup for Development\n---------------------\n\nBootstrap\n\n``` shell\n\n$ lerna bootstrap\n\n```\n\nBuild\n\n``` shell\n\n$ npm run build\n\n```\n\n\nRun Docs\n--------\n\n``` shell\n\n$ cd docs\n$ npm start\n\n```\n\nWatch for Changes and Build\n---------------------------\n\n``` shell\n\n$ npm run watch\n\n```\n\n\nRun Test\n--------\n\n``` shell\n\n$ npm test\n\n```\n\nto watch\n\n``` shell\n\n$ npm test:watch\n\n```\n\n","funding_links":[],"categories":["Material Components Web (MDC Web)"],"sub_categories":["MDC Web Framework Integrations"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-mdc%2Freact-material-components-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-mdc%2Freact-material-components-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-mdc%2Freact-material-components-web/lists"}