mui-breakpoint-indicator

MUI Breakpoint Indicator

When developing responsive applications with mui, it's often helpful to be able to easily visualize the current breakpoint. Enter, <BreakpointIndicator />.

How does it work?

You can simply import the component at the top level of your app, just after mui's ThemeProvider (shown below with redux as well):

import { render } from 'react-dom';
import { ThemeProvider, CssBaseline } from '@mui/material';

import { theme } from './path/to/my/theme';
import { MyApp } from './path/to/MyApp';
import { BreakpointIndicator } from 'mui-breakpoint-indicator';

const store = configureStore();

const root = (
  <ThemeProvider theme={theme}>
    <CSSBaseline />
    <BreakpointIndicator />
    <MyApp />
  </ThemeProvider>
);

ReactDOM.render(root, document.querySelector('#root'));

How can it be configured?

the position prop [string, defaults to top-center]

The BreakpointIndicator has an optional position prop with the following type:

type Position =
  | 'bottom-center'
  | 'bottom-left'
  | 'bottom-right'
  | 'left-center'
  | 'right-center'
  | 'top-center'
  | 'top-left'
  | 'top-right'
  ;

The default is top-center, but you can configure the default to whatever position you prefer, e.g.:

<BreakpointIndicator position="bottom-right" />

the visible prop [boolean, defaults to true]

A common use case is to use a tool like this conditionally, e.g.:

const debugMode = useSelector(selectDebugMode);

return (
  <div>
    {debugMode && <BreakpointIndicator />}
    <MyApp />
  <div>
)

While you can still do the above, BreakpointIndicator accepts a visible prop (defaults to true) where you can pass a debugMode flag, as above:

const debugMode = useSelector(selectDebugMode);

return (
  <div>
    <BreakpointIndicator debugMode={debugMode} />
    <MyApp />
  <div>
)

The implementation of the visible prop is such that passing visible={false} is a no-op.

How can it be interacted with?

Resize the Viewport

Simply resize the viewport, and watch the indicator change:

Click to Rotate

Clockwise

You can click on the indicator to temporarily rotate it to the next position, clockwise.

Counter-Clockwise

You can ctrl+click the indicator to rotate it counter-clockwise.

NOTE: When you refresh or rerender your app it will revert to whatever the position prop is set to (or the default, top-center if none is set), so be sure to just set the position prop if you want it to always be in a particular area of the screen.

Can I use this if I'm not using MUI?

No. At this time, this component is directly tied to some mui underpinnings.