Breakpointer

A lightweight React library for real-time breakpoint detection with support for custom and default Tailwind breakpoints.

!NPM Version
!gzip
!License


!Downloads

Breakpointer in action:

!Breakpointer Demo

Installation

``bash
npm install breakpointer
`

Exports

| Export | Description |
|--------|-------------|
| BreakpointerProvider | A context provider to wrap your application |
| useBreakpointer | A hook to access the current breakpoint |

Basic Usage

$3

Wrap your application with BreakpointerProvider:

`tsx
import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { BreakpointerProvider } from 'breakpointer';

/*
if mode !== "development", the BreakpointerIndicator will skip rendering
*/
const MODE = import.meta.env.MODE; // based on your chosen build tool

createRoot(document.getElementById('root')!).render(




,
)
`

$3

Use the useBreakpointer hook to detect breakpoints in your components:

`tsx
import React from 'react';
import { useBreakpointer } from 'breakpointer';

const MyComponent = () => {
const {
screen, // ex: "md" if currentWidth is in the range from 768 - 1023
currentWidth // innerWidth/viewPort width
} = useBreakpointer();

return (

{screen === 'sm' &&

Small screen (640px - 767px)

}
{screen === 'md' &&

Medium screen (768px - 1023px)

}
{screen === 'lg' &&

Large screen (1024px - 1279px)

}

Current width: {currentWidth}px

);
};

export default MyComponent;
`

Default Breakpoints

Breakpointer comes with the following default breakpoints, which align with Tailwind CSS's default breakpoint system:

| Breakpoint | Min Width (px) | Description |
|------------|----------------|--------------------------------------|
| sm | 640 | Large phones & small tablets |
| md | 768 | Tablets |
| lg | 1024 | Laptops & large tablets |
| xl | 1280 | Desktop & large laptops |
| 2xl | 1536 | Wide screen & large desktops |

Usage with Tailwind v3

Note: resolveConfig is only applicable for Tailwind CSS version 3.x.x.

To use custom Tailwind breakpoints, pass a breakpointsObj prop to BreakpointerProvider:

`tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { BreakpointerProvider } from 'breakpointer';

import resolveConfig from "tailwindcss/resolveConfig"; // resolver Function
import tailwindConfig from "../tailwind.config"; // js/ts tailwind config

const resolvedConfig = resolveConfig(tailwindConfig);

createRoot(document.getElementById('root')!).render(


,
document.getElementById('root')
);
`

BreakpointerIndicator

The BreakpointerIndicator component has been integrated into the BreakpointerProvider, so there is no need for manual invocation. You can now customize its appearance by passing a classNames object as a prop to the BreakpointerProvider.

$3

The classNames object allows you to style the internal elements of the BreakpointerIndicator. Below is a table describing the available properties:

| Property | Description |
|----------------|-----------------------------------------------------------------------------|
| wrapper | Styles the outer wrapper of the indicator. |
| iconWrapper | Styles the container for the breakpoint icon. |
| screen | Styles the text displaying the current breakpoint (e.g., sm, md). |
| currentWidth | Styles the text displaying the current viewport width in pixels. |

$3

`tsx
import { BreakpointerProvider } from 'breakpointer';

const App = () => {
return (
mode="development"
classNames={{
wrapper: ["bg-gray-300", "text-red-800", "p-4", "rounded-lg"],
iconWrapper: ["content-start"],
screen: ["font-bold", "text-lg", "text-blue-500"],
currentWidth: ["text-sm", "text-gray-400"],
}}
>


);
};
`

This configuration will style the BreakpointerIndicator` according to the provided class names.