anthonyleung-dev/react-material-web

This project aims to provide React components based on the Material Web design guidelines originally from https://github.com/material-components/material-web.

React Material Web Components

This library provides a set of React components styled with Material Design, leveraging the capabilities of @material/web and @lit/react.

Installation

To install Material Web React, you can use npm or yarn. Run one of the following commands in your project directory:

npm install react-material-web

or

yarn add react-material-web

Usage

Here's a quick example to get you started. After installing, you can import and use Material Components like any other React component.

Add styles to your project:

import 'react-material-web/styles'

Then, you can use the components like this:

import React from 'react';
import { MdFilledButton } from 'react-material-web';

function Example() {
  return (
    <div>
      <MdFilledButton>Click me</MdFilledButton>
    </div>
  );
}

For more detailed documentation on each component and its API, please refer to Material Components Web.

Storybook

You can also check out our Storybook to see all the components in action. To run the Storybook, use the following command:

npm run storybook

or

Storybook

Available Components

Base

• ✅ Button
• ✅ FAB
• ✅ Icon
• ✅ Icon button
• ✅ Checkbox
• ✅ Chips
• ✅ Dialog
• ✅ Divider
• ✅ Elevation
• ✅ Focus ring
• ✅ List
• ✅ Menu
• ✅ Progress indicators
• ✅ Radio
• ✅ Ripple
• ✅ Select
• ✅ Slider
• ✅ Switch
• ✅ Tabs
• ✅ Text field

Labs 🚧

WARNING ⚠️ This folder contains experimental features that are not recommended for production.

• ✅ Card
• ✅ Segmented button
• ✅ Navigation bar

Core Dependencies

Our library is built upon the solid foundation of Material Design and modern web technologies, including:

• @material/web: For Material Design components.
• @lit/react: For creating Lit-based components within React.
• @fontsource/roboto: The default Material Design font.
• material-symbols: For Material Design icons and symbols.

License

Distributed under the MIT License. See LICENSE for more information.

react-material-web's Issues

import issue: Unable to resolve @import "~@fontsource/roboto" from xxx/node_modules/react-material-web/dist when using vite as bundler

Me and my colleague can reproduce this issue by following steps below:

1. create a new react app using vite as bundler by running command npm init vite@latest --template and choose react and typescript as scaffold;
2. run npm install react-material-web (at the moment its version is 1.0.5);
3. using the library components in project;
4. when run npm run dev to start server, the error raised: Unable to resolve @import "~@fontsource/roboto" from xxx/node_modules/react-material-web/dist

A temporary solution would be removing the ~ symbol in the import statement at the 2nd line in /node_modules/react-material-web/dist/styles.css which means to turn
@import '~@fontsource/roboto';
into
@import '@fontsource/roboto';

After doing this little tweak it works.
I don't know if this is an issue related to vite bundler, but I think it's beneficial to first summit an issue here as it may affect some projects using vite.

Optional CSS import

The default exported file in src/index.tsx imports the CSS file containing fonts (Roboto, Material Symbols) and additional styles. This import is currently mandatory, but it would be beneficial to make it optional.

react-material-web/src/index.tsx

Line 1 in 3d006c6

import './styles.css'

Here's why:

• Not all projects use Roboto font or Material Symbols.
• Material Symbols are imported even if the Icon component isn't used.

Possible solutions:

• Export individual components: Instead of just exporting the default (.) and styles, consider exporting each component individually. This allows developers to import specific components without pulling in the entire CSS file.
• Remove default CSS import: This is a breaking change, but it removes the mandatory import of styles. Developers would then need to import the CSS file explicitly when needed.

Thanks for working on this!

Nextjs - "use client"

Is there a reason components are not annotated with 'use client' or was this not considered yet? If there's no issue, I'd like to submit a PR with these annotations, as I think Material Web doesn't currently support SSR for its components.