[BreakpointIndicator] Add new component

see: https://github.com/dimitropoulos/mui-breakpoint-indicator try it out: https://www.npmjs.com/package/mui-breakpoint-indicator

I have been using this component for a while like:

<MyApp>
  {debugMode && <BreakpointIndicator />
</MyApp>

And I bet I’m not alone in finding value in such a tool.

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

When the user changes the viewport such that they enter a new mui breakpoint, the helper updates.

Examples 🌈

https://github.com/dimitropoulos/mui-breakpoint-indicator

Motivation 🔦

It is sometimes difficult to keep mental note, when making a responsive site with mui, what breakpoint the viewport is currently in. This greatly simplifies the development process.

[oliviertassinari]

What if we were using the exact same approach than Chrome that displays the current viewport when resizing? This approach solves the visibility issue, as only visible when resizing, to later fade away.

Regarding the discoverability issue, I think that we could document it in the breakpoint parts of the documentation, as well a include it in the examples.

Exciting 😃. I’m all in with such an approach.

@dimitropoulos What do you think?

[dimitropoulos]

(I’m working on writing up an issue for ErrorBoundaries 😄! I would be happy to contribute this component and I think I have some feedback that could be useful (TLDR; I think it definitely has a use, and I have some rationale to share as to why a library like material-ui has any business including such a component). I should be done writing up the issue in the next few hours.)