reactmdcweb v0.0.7
reactmdcweb
Material Components for Web encapsulated as React Components. These components use the CSS and JS directly from Material Components for Web and by and large implement the Simpler Approach of integrating with frameworks. These are therefore suitable for use in Browser/Webview contexts.
The intent of this project is to build a completely non-opinionated, flexible and modular plain vanilla wrapping of Material Components of Web without any magic. We won't make any assumptions in how the components should be composited beyond the documented specifications and let you use your nodes as children.
The setup for compiling to CommonJS uses React to CommonJS project.
Repositories
- GitHub repository: https://github.com/srinathh/reactmdcweb
- NPM package: https://www.npmjs.com/package/reactmdcweb
Usage
1. Import CSS for material components for web into your app.
Install material components for web in your app
npm install --save material-components-web
Import the default css from material-components-web in your app
import 'material-components-web/dist/material-components-web.css'
Alternatively to importing the full CSS, you can also import only the CSS belonging to the components of interest like this.
import '@material/card/dist/mdc.card.min.css'
2. Install 'reactmdcweb` package
npm install --save reactmdcweb
3. Import required components into your app
import {Card, CardPrimary, CardTitle, CardSubTitle} from 'reactmdcweb'
4. Use the Components
<Card>
<CardPrimary>
<CardTitle>Title</CardTitle>
<CardSubTitle>SubTitle</CardSubTitle>
</CardPrimary>
</Card>
Compiling
npm run build-commonjs
Components
These UI elements have currently been implemented. More to come.
- Card Components
- Card,
- CardPrimary,
- CardTitle,
- CardSubTitle,
- CardActions,
- CardActionButton,
- CardSupportingText,
- CardMediaItem
- Toolbar Components
- Toolbar,
- ToolbarTitle,
- ToolbarSection,
- Main
- Drawer Components
- TemporaryDrawer,
- TemporaryDrawerContent,
- TemporaryDrawerToolbarSpacer
- Button
- Fab
- List Components
- List,
- ListItem
- ListItemText
- Text Input
- TextField
- TextFieldInput