{"id":20662552,"url":"https://github.com/berndwessels/preact-mdc","last_synced_at":"2026-03-04T01:16:35.226Z","repository":{"id":57329508,"uuid":"87866373","full_name":"BerndWessels/preact-mdc","owner":"BerndWessels","description":"material design components for preact using material-components-web sass styles (for live demo click the link below)","archived":false,"fork":false,"pushed_at":"2017-04-12T23:39:24.000Z","size":31,"stargazers_count":24,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-15T23:06:15.014Z","etag":null,"topics":["material","material-components","material-components-web","material-design","material-design-components","mdc","preact","preact-components"],"latest_commit_sha":null,"homepage":"https://berndwessels.github.io/preact-mdc-demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BerndWessels.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-10T23:18:53.000Z","updated_at":"2024-09-23T14:19:20.000Z","dependencies_parsed_at":"2022-09-14T19:01:46.212Z","dependency_job_id":null,"html_url":"https://github.com/BerndWessels/preact-mdc","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BerndWessels%2Fpreact-mdc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BerndWessels%2Fpreact-mdc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BerndWessels%2Fpreact-mdc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BerndWessels%2Fpreact-mdc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BerndWessels","download_url":"https://codeload.github.com/BerndWessels/preact-mdc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224958273,"owners_count":17398500,"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":["material","material-components","material-components-web","material-design","material-design-components","mdc","preact","preact-components"],"created_at":"2024-11-16T19:14:36.148Z","updated_at":"2026-03-04T01:16:35.153Z","avatar_url":"https://github.com/BerndWessels.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# preact-mdc\n\n## Overview\n\nThis is a [preact](https://github.com/developit/preact) integration of the awesome [material-components-web](https://github.com/material-components/material-components-web) material design components library.\n\n## material-design-components-web\n\nThis library is the successor of the awesome but now depricated [material-design-lite](https://github.com/google/material-design-lite) library. \n\n## Goals\n\nWe try to provide all available components from `material-design-components-web` as pure `preact` components.\nWe try to not use any of the MDC `javascript` code but only use the MDC `sass` styles.\n\n## Components\n\n- Button\n- Card\n  - CardAction\n  - CardActions\n  - CardHorizontalBlock\n  - CardMedia\n  - CardMediaItem\n  - CardPrimary\n  - CardSubtitle\n  - CardSupportingText\n  - CardTitle\n- Checkbox\n- CheckboxLabel\n- Drawer\n  - DrawerContent\n  - DrawerHeader\n  - DrawerToolbarSpacer\n- Fab\n- FormField\n- IconToggle\n- List\n  - ListDivider\n  - ListGroup\n  - ListGroupDivider\n  - ListGroupHeader\n  - ListItem\n  - ListItemDetail\n  - ListItemText\n  - ListItemTextPrimary\n  - ListItemTextSecondary\n- Radio\n- Snackbar\n- Switch\n- TextField\n- Toolbar\n  - ToolbarRow\n  - ToolbarSection\n  - ToolbarTitle\n\n## Demo\n\n- Here is a [demo project](https://github.com/BerndWessels/preact-mdc-demo) showing all the components and how to use them.\n- Here is a [live demo](https://berndwessels.github.io/preact-mdc-demo/) of that project.\n\n## Usage\n\nAt the moment we directly provide the components written in ES6 as individual modules.\n\n- Add this library to your project\n\n` npm install --save preact-mdc`\n\nThis requires the following depenencies in your project:\n```json\n    \"material-components-web\": \"0.8.0\",\n    \"material-design-icons\": \"^3.0.0\",\n```\n\n### ES6 NPM webpack\n\nSince `preact-mdc` components are ES6 components and used directly from the npm package you might need to tweak your `webpack.config`.\n \nHere is an example:\n\n```js\n    module: {\n      noParse: /\\.min\\.js/,\n      rules: [{\n        test: /\\.jsx?$/,\n        exclude: [/node_modules(?![\\/\\\\]preact-mdc)/],\n        use: [{\n          loader: 'babel-loader',\n          options: {\n            presets: [\n              ['es2015', {loose: true, modules: false}]\n            ],\n            plugins: [\n              'transform-class-properties',\n              'transform-object-rest-spread',\n              ['transform-react-jsx', {pragma: 'h'}]\n            ]\n          },\n        }]\n      }\n```\n\n\n# Contributing\n\nYou are very welcome to report issues, make PRs and become a contributor.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fberndwessels%2Fpreact-mdc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fberndwessels%2Fpreact-mdc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fberndwessels%2Fpreact-mdc/lists"}