material-components / material-components-web-react Goto Github PK
View Code? Open in Web Editor NEWMaterial Components for React (MDC React)
License: MIT License
Material Components for React (MDC React)
License: MIT License
MDC Web uses autoprefixer to build Css files from Sass files. MDC React should also do this to support devs using Css.
Hi there,
I have some kind of flickering when I do ssr with my app and I think it is due to the fact that the generated class are different from the server and the client side. (The content from the view source
and the one from document.documentElement.innerHTML
are different, but I don't have any react warnings)
As I can see in your documentation, a possible action to take would be to use the same generator: The whole page needs to be rendered with a single generator.
However, i do not understand how I should do that..
Here is the how I render server side:
const sheetsRegistry = new SheetsRegistry();
const generateClassName = createGenerateClassName();
renderToString(
<Loadable.Capture report={m => modules.push(m)}>
<Provider store={store}>
<StaticRouter location={req.url} context={context}>
<Frontload isServer>
<JssProvider registry={sheetsRegistry}
generateClassName={generateClassName}>
<MuiThemeProvider theme={overidedTheme}
sheetsManager={new Map()}>
<CssBaseline/>
<App />
</MuiThemeProvider>
</JssProvider>
</Frontload>
</StaticRouter>
</Provider>
</Loadable.Capture>
)
And Client side
const Application = (<Provider store={store}>
<ConnectedRouter history={history}>
<Frontload noServerRender>
<MuiThemeProvider theme={overidedTheme}>
<CssBaseline/>
<Main />
</MuiThemeProvider>
</Frontload>
</ConnectedRouter>
</Provider>);
Loadable.preloadReady().then(() => {
hydrate(Application, root);
});
When I compare the outputs, the difference are coming from the class names and the positions of the style
tags (client side has multiple style tag inside the head while the server side has only one big style tag at the end before the body)
I would love to understand what could be the cause of this problem and how I can solve it!
Thanks :)
Screenshot Testing - golden screenshots should be in repo according to docs but *.golden.png
is in .gitignore
:
https://github.com/material-components/material-components-web-react/blob/master/.gitignore#L9
Hello, I'm using the code in an app and totally enjoying the library:
I noticed this when I ran Lighthouse (with emoji commentary)
😑 Opportunities


🤔 ok cool, go find in devtools…

🤔 ok, go to bundle…
found this CSS import in https://github.com/material-components/material-components-web-react/tree/master/packages/material-icon: @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
🤔 ok, go get that resource in chrome…
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff) format('woff');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
}
💪 ok cool, MaterialIcon
has sass with this fonts.gstatic.com URL.
Basically any of these fonts in css files that are in HEAD will block rendering on the network if the user puts a link to the css file in head or in a style tag.
So I pre-loaded https://fonts.googleapis.com/icon?family=Material+Icons in the head of my HTML, and could preload the woff file also, but that is not really a stable way to go about it since any of the packages in the chain could break without warning.
I was able to configure webpack to consume the @ material sass directly, but because of this URL I don't know how to make this code lighthouse-friendly without putting it after the body. I may be doing something wrong at a higher level.
TL;DR: Could we come up with a way to bundle in the font resources? Or SVGs? Maybe that takes the form of documentation or an example.
My sense is that some users are going to write this off as being slow rather than tear in to the details, so if we could make stuff 'just work' as they say, it'd be great. Surely for places like the Top Navbar in-line SVGs would be more performant than an icon font. (I think it's ~62kb) Maybe I don't know about a bundler that would let me resolve this, the closest thing I found was
https://www.npmjs.com/package/google-fonts-plugin, but I don't know how I'd connect it to this code as a user.
Where'd I go wrong here? Is there something on the roadmap that I'd want to know about?
It's great that each component has documentation but it's a bit annoying to jump between each folder in GitHub. Maybe creating a hub page as part of the README would be a good idea. I'm willing to give it a shot if there are no objections?
Currently we don't have a build step for the packages, which requires npm users to transpile the packages themselves. The packages should be ES5 for everyone to consume.
Once material-components/material-components-web#2716 and material-components/material-components-web#2717 are merged and a pre-release exists, we need to update the React component to make use of the updated APIs.
Readme file of MCW does not point to this project as the React adapter. Is this official? Will it be maintained, and is it safe to base production projects on it?
External contributors will always have PRs with failing tests. This is due to no having access to GCP, which stores our screenshots.
After upgrading MDC Web to v0.35.1, the fixed variant must be added to the React Component.
When Button is unmounted, React will produce warning as bellow:
Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in RippledComponent (created by App)
Here is minimal test case that would produce warning when button is clicked:
https://codesandbox.io/s/9zw5v67kn4
Steps to reproduce:
Actual Results:
No Ripple is activated
Expected Results:
Ripple should activate, similar to MDC Web
It seems like this project is actively developing.
I'm wondering if contribution is allowed for anyone interested in this project.
Thank you.
Would be nice to have components for the typography styles, we can create a base one that can be reused for titles, paragraphs and more:
<Typography type="XXX">
Text
</Typography>
Where type can be one of the following:
We can also add components like:
<Title level={1}>Hey</Title>
<Subtitle level={1}>Hey</Subtitle>
and so on :) What do you think? Can I make a PR for this?
Currently our screenshot tests take 200s on Travis to startup. We can decrease this time by decreasing the number of webpack configs we need to build.
Related PR: #6
Proposed solution:
Use react-router to build a SPA of each page, which will result in one webpack config.
Known issues:
Is TextField
supposed to wrap textarea
instead of the provided Input
when the prop textarea
is set to true
?
Will there be also a wrapper for textarea
similar to Input
?
When running npm test
, an error occurs in the stop
script:
> ./test/screenshot/stop.sh
'.' is not recognized as an internal or external command, operable program or batch file.
This might be because ps aux
has different output format in MinGW on Windows. (I assume it wouldn't work at all from a standard command prompt.)
Hello,
With the BEM naming for base MDC elements, class names can become long very quickly, mdc-list-item__secondary-text
for instance. I was thinking about using CSS modules to shorten such names, but according to rmwc/rmwc#113, it looks like it is not (easily) possible to do so without breaking some components which have event listeners attached (elements with a ripple effect for instance or menus).
Could someone please confirm or deny this?
Is the application layout:
If it's 3, what is a good way of building the layout when starting with material-components-web-react now?
Currently all packages are on 0.34.1, but should be using latest (v0.35.0).
Known issues:
Ripple is broken, and needs to wrap the foundation.activate()
call in a requestAnimationFrame
. Not sure why this is the case, so further investigation is needed.
IE11 does not natively support Object.assign. Add babel-polyfill to build pipeline to support IE11.
Need a changelog.md to account for changes from each version. This will be similar to how the change log is generated in MDC-Web.
Dear maintainers,
I find it a bit off-putting that to use a component one has to import the compiled version from @material/react-button/dist
(as opposed to simply @material/react-button
). Is there a reason why you decided to make it so?
Apart from the packages in this repo I have never had to reference /dist
- it is not obvious for me as a component consumer. What's more, in the docs to every component, the imports in demo look as one would expect :import Button from '@material/react-button'
. Yet this won't work without having to transpile imported modules or in create-react-app context.
Please, let me if there is a good reason behind this decision I may not understand.
Main components are compile fine except the react version. Why?
When I try import like example:
import LineRipple from '@material/react-line-ripple';
And try use:
class Foo extends Components {
render() {
return(
<div>
<LineRipple />
...
</div>
)
}
}
Then throw:
ERROR in ./node_modules/@material/react-line-ripple/index.js
Module parse failed: Unexpected token (8:14)
You may need an appropriate loader to handle this file type.
| export default class LineRipple extends Component {
|
| foundation_ = null;
|
| state = {
...
Someone has a proposal solution for that?
Thank's guys ;)
When running npm run build
, and there is an empty directory in /packages
, throw an error to indicate that a JS file is required.
Hi, I help maintain React and some other projects like Create React App. 👋
I recently saw in this issue (facebook/create-react-app#4648 (comment)) that this project uses experimental syntax (such as class properties) as part of the npm entry point.
I strongly encourage you to reconsider this decision. If the class properties transform ends up changing (which is very likely) or abandoned (not as likely, but could happen), having uncompiled packages on npm using it will create a huge amount of churn for everyone (including maintainers of this project). Not to mention this makes the project unusable in any environment that respects the spec (such as Node.js).
Please compile any experimental syntax away before publishing. If you’re convinced that keeping import
uncompiled is worth it (which is a whole separate can of worms as you can see in graphql/graphql-js#1248), please compile at least the non-standard syntax away when publishing. That includes JSX too.
I understand this might seem like an inconvenience now. But it will be much better to do now than deal with pain for months when build tools and the spec changes. Thanks.
@lynnjepsen, I know I've been blowing you up on discord a bit, but I had to share this.
This is currently hacked together, but the fact that it works is crazy. I found a way to import the actual component class from MDC web and directly use it in React.
Check it out
What does this mean?
I don't have to reimplement a single foundation adapter! I can use all of the ones already written in MWC web with minimal tweaks. I need to work through this more to find the edge cases and do a real implementation, but I'm pretty stoked right now.
Steps to reproduce:
Actual Results:
Background color of the button should change
Expected Results:
Background color of the button doesn't change
Material-components-web is being ported to different libraries, including Vue, and it seems any library or framework other than React has been happily integrated with Sass.
It is known that the state of styles in React is a mess. This mess is two fold: First whether to write css in javascript. Seconds whether to process css by tools like Sass.
Another problem is starting a new project with React is hard. Hence, many of us opt to use CRA so that we can delegate dealing with nightmares like Webpack to other developers, which leads us to another problem: Weak or nonexisting support of Sass in CRA.
There are half baked approach for how to have Sass processing in CRA 1.x. None of them, including the one suggested in material-components-web-react guide, are ideal.
Sass is supposed to be supported in CRA 2.x, but it only works properly for the application code, and not for the npm packages that import sass files from other npm packages, which is the case of material-components-web-react components. Specifically see facebook/create-react-app#4651, facebook/create-react-app#4195 and facebook/create-react-app#4195 (comment).
Unfortunately, CRA authors are highly opinionated, inflexible and not very responsive when it comes to these Sass issues. At the moment, using material-components-web-react with CRA 1.x is possible with some hacks, and completely broken in CRA 2.x. Even Google project material-components-web-catalog uses an ejected version of CRA 1.x.
Given these high barriers, and given that Sass is a hard dependency of developing production quality with Material-components-web, the question is what can be done to stay away from Sass mess in React tools? Specifically, is it possible to change sass imports in material-components-web-react so that it can work with CRA 2.x, without CRA code being changes?
This issue will inevitably come up at some point: the community will need type definitions to reliably utilize the components in TypeScript projects.
Since this project is still at an early stage - maybe instead of creating and maintaining a separate package with definitions, it would make more sense to transition the project to TypeScript? This will provide a guarantee that the code, including changes and new features, are always in sync.
Hey, I came across this repo snooping for new material design components for react (the alternative being material-ui). Looks like this is under active development but there's no readme. Will this be an official react library for material components web?
Thanks,
Mike
Package readmes currently do not show the import paths for the sass or css as shown in https://github.com/material-components/material-components-web/tree/master/packages/mdc-button#styles.
Potential fix for top-app-bar: 5c24196.
Issue was addressed in this PR.
Showing how to use our components within a create-react-app
Should provide a start to finish on how to build and app using our components. Similar to https://github.com/material-components/material-components-web/blob/master/docs/getting-started.md.
Instead ours will start with create-react-app
and then move into building a button on the page.
At this point it seems documentations for this library is nonexistent. The general guidelines has a section about importing with ES5. Is that the recommended way of using this library?
It'd be nice to have an example of best practice in the documentations.
Related to this comment: #117 (comment)
We should include --save
in the npm install instructions for all components. This is an issue to go back and update all readmes.
Usage is here: https://github.com/material-components/material-components-web/blob/v0.35.1/packages/mdc-textfield/icon/foundation.js#L87.
Also add appropriate tests.
All references to stroked were renamed to outlined. Rename and fix all screenshot tests regarding card.
material-components-web-react currently implements only the very basic components (Button, Checkbox) - is there a roadmap, when the other components will be implemented? Or is there a contribution-guide, that explains how adding a new component is supposed to work?
the README is pretty elaborate on how to install react and sass - but its missing the crucial part of how to actually install material-components-web-react
- the simple npm i --save material-components-web-react
only brings up an outdated version (0.0.10), which is missing most of the components except button and checkbox.
How to open a drawer initialized using adapter and foundation?
Some of the packages use deprecated react lifecycle method componentWillReceiveProps
(Please see deprecation note).
It should use getDerivedStateFromProps
instead.
Create a playground for components, so developers can come to interact and explore what components we support without having to build an app.
See for examples:
https://material-ui.com/demos/app-bar/
http://react-toolbox.io/#/components/app_bar
https://jamesmfriedman.github.io/rmwc/buttons
https://www.npmjs.com/package/material-components-web-react
in npm packages you very old release, please fix it
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.