React Breakpoint Indicator

A react component widget that shows current width information for frontend developers. The default position is bottom-left, but it can have a custom position and it will reposition to either top-right, bottom-left, or bottom-right.

The default breakpoints are:

• SM: <= 640px
• MD: <= 768px
• LG: <= 1024px
• XL: <= 1280px
• 2XL: > 1280px

Installation

npm install -D react-breakpoint-indicator

or

yarn add -D react-breakpoint-indicator

Usage

Import the component in your project root.

import BreakpointIndicator from "react-breakpoint-indicator";

const App = () => {
  return <BreakpointIndicator />;
};

export default App;

Props

• moreStyle: Custom CSS styles for the component.
• disableDev: Disable the component in development mode check. Enabling this will make component work on production as well.
• position: Custom position for the component. Default is bottom-left. Available options are top-left, top-right, bottom-left, and bottom-right.