breakpoint-utils 1.0.0

package/README.md

@@ -0,0 +1,186 @@
+# breakpoint-utils
+
+Lightweight utilities for querying responsive breakpoints and viewport width in JavaScript and React.
+
+## Installation
+
+```bash
+npm install breakpoint-utils
+```
+
+## Features
+
+- **Configurable breakpoints** - Use defaults or define your own
+- **Responsive utilities** - `up`, `down`, `only`, `not`, `between`
+- **React hook** - `useViewport` for reactive viewport width
+- **Lightweight** - Minimal dependencies
+- **TypeScript** - Full type safety
+
+## Quick Start
+
+### Default Breakpoints
+
+```typescript
+import { up, down, only } from 'breakpoint-utils';
+
+// Default breakpoints: xs: 480, sm: 640, md: 768, lg: 1024, xl: 1280, 2xl: 1536
+
+if (up('md')) {
+  // viewport >= 768px
+}
+
+if (down('lg')) {
+  // viewport < 1024px
+}
+
+if (only('sm')) {
+  // 640px <= viewport < 768px
+}
+```
+
+### Custom Breakpoints
+
+```typescript
+import { configure, up, down } from 'breakpoint-utils';
+
+// Define your own breakpoints
+configure({
+  mobile: 320,
+  tablet: 768,
+  desktop: 1024,
+  wide: 1440,
+});
+
+if (up('tablet')) {
+  // viewport >= 768px
+}
+```
+
+## API
+
+### `configure(breakpoints)`
+
+Set custom breakpoints. Must be called before using utility functions.
+
+```typescript
+configure({
+  small: 600,
+  medium: 900,
+  large: 1200,
+});
+```
+
+### `getBreakpoints()`
+
+Get the current breakpoint configuration.
+
+```typescript
+const breakpoints = getBreakpoints();
+// { xs: 480, sm: 640, ... } or your custom config
+```
+
+### `up(size)`
+
+Returns `true` if viewport width is >= the breakpoint.
+
+```typescript
+up('md') // viewport >= 768px
+```
+
+### `down(size)`
+
+Returns `true` if viewport width is < the breakpoint.
+
+```typescript
+down('lg') // viewport < 1024px
+```
+
+### `only(size)`
+
+Returns `true` if viewport is within the breakpoint range (>= size and < next breakpoint).
+
+```typescript
+only('md') // 768px <= viewport < 1024px
+```
+
+### `not(size)`
+
+Returns `true` if viewport is outside the breakpoint range.
+
+```typescript
+not('md') // viewport < 768px OR viewport >= 1024px
+```
+
+### `between(minSize, maxSize)`
+
+Returns `true` if viewport is between two breakpoints.
+
+```typescript
+between('sm', 'lg') // 640px <= viewport < 1024px
+```
+
+## React Hook
+
+### `useViewport()`
+
+React hook that returns the current viewport width and updates on resize.
+
+```typescript
+import { useViewport, configure, up } from 'breakpoint-utils';
+
+// Optional: configure custom breakpoints
+configure({
+  mobile: 375,
+  tablet: 768,
+  desktop: 1024,
+});
+
+function MyComponent() {
+  const width = useViewport();
+  
+  return (
+    <div>
+      <p>Viewport width: {width}px</p>
+      {up('tablet') && <p>Tablet or larger</p>}
+    </div>
+  );
+}
+```
+
+## Direct Viewport Access
+
+```typescript
+import { viewport } from 'breakpoint-utils';
+
+const width = viewport.getWidth();
+
+const unsubscribe = viewport.onResize(() => {
+  console.log('Viewport resized:', viewport.getWidth());
+});
+
+// Clean up
+unsubscribe();
+```
+
+## TypeScript
+
+```typescript
+import { configure, up, type Breakpoints } from 'breakpoint-utils';
+
+const myBreakpoints = {
+  xs: 320,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+} satisfies Breakpoints;
+
+configure(myBreakpoints);
+
+// Type-safe breakpoint names
+type MyBreakpoint = keyof typeof myBreakpoints;
+const size: MyBreakpoint = 'md';
+```
+
+## License
+
+MIT

package/dist/breakpoints.d.ts

@@ -0,0 +1,9 @@
+export type Breakpoints = Record<string, number>;
+export declare const configure: <T extends Breakpoints>(customBreakpoints: T) => void;
+export declare const getBreakpoints: () => Breakpoints;
+export declare const up: (size: string) => boolean;
+export declare const down: (size: string) => boolean;
+export declare const only: (size: string) => boolean;
+export declare const not: (size: string) => boolean;
+export declare const between: (minSize: string, maxSize: string) => boolean;
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../src/breakpoints.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAWjD,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,EAAE,mBAAmB,CAAC,SAGpE,CAAC;AAEF,eAAO,MAAM,cAAc,mBAA2B,CAAC;AAcvD,eAAO,MAAM,EAAE,GAAI,MAAM,MAAM,YAG9B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,MAAM,MAAM,YAGhC,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,MAAM,MAAM,YAMhC,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,MAAM,MAAM,YAM/B,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,SAAS,MAAM,EAAE,SAAS,MAAM,YAOvD,CAAC"}

package/dist/breakpoints.js

@@ -0,0 +1,61 @@
+import viewport from './viewport';
+const defaultBreakpoints = {
+    xs: 480,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+};
+let currentBreakpoints = { ...defaultBreakpoints };
+let sortedBreakpoints = [];
+const updateSortedBreakpoints = () => {
+    sortedBreakpoints = Object.entries(currentBreakpoints).sort((a, b) => a[1] - b[1]);
+};
+updateSortedBreakpoints();
+export const configure = (customBreakpoints) => {
+    currentBreakpoints = customBreakpoints;
+    updateSortedBreakpoints();
+};
+export const getBreakpoints = () => currentBreakpoints;
+const validateBreakpoint = (size) => {
+    if (!(size in currentBreakpoints)) {
+        throw new Error(`Invalid breakpoint: "${size}". Available breakpoints: ${Object.keys(currentBreakpoints).join(', ')}`);
+    }
+};
+const getNextBreakpoint = (size) => {
+    const currentIndex = sortedBreakpoints.findIndex(([name]) => name === size);
+    const next = sortedBreakpoints[currentIndex + 1];
+    return next ? next[1] : Infinity;
+};
+export const up = (size) => {
+    validateBreakpoint(size);
+    return viewport.getWidth() >= currentBreakpoints[size];
+};
+export const down = (size) => {
+    validateBreakpoint(size);
+    return viewport.getWidth() < currentBreakpoints[size];
+};
+export const only = (size) => {
+    validateBreakpoint(size);
+    const width = viewport.getWidth();
+    const min = currentBreakpoints[size];
+    const max = getNextBreakpoint(size);
+    return width >= min && width < max;
+};
+export const not = (size) => {
+    validateBreakpoint(size);
+    const width = viewport.getWidth();
+    const min = currentBreakpoints[size];
+    const max = getNextBreakpoint(size);
+    return width < min || width >= max;
+};
+export const between = (minSize, maxSize) => {
+    validateBreakpoint(minSize);
+    validateBreakpoint(maxSize);
+    const width = viewport.getWidth();
+    const min = currentBreakpoints[minSize];
+    const max = currentBreakpoints[maxSize];
+    return width >= min && width < max;
+};
+//# sourceMappingURL=breakpoints.js.map

package/dist/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../src/breakpoints.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { configure, getBreakpoints, up, down, only, not, between } from './breakpoints';
+export type { Breakpoints } from './breakpoints';
+export { default as useViewport } from './useViewport';
+export { default as viewport } from './viewport';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxF,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { configure, getBreakpoints, up, down, only, not, between } from './breakpoints';
+export { default as useViewport } from './useViewport';
+export { default as viewport } from './viewport';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/useViewport.d.ts

@@ -0,0 +1,3 @@
+declare const useViewport: () => number;
+export default useViewport;
+//# sourceMappingURL=useViewport.d.ts.map

package/dist/useViewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewport.d.ts","sourceRoot":"","sources":["../src/useViewport.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,WAAW,cAahB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/useViewport.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+import viewport from './viewport';
+const useViewport = () => {
+    const [width, setWidth] = useState(viewport.getWidth());
+    useEffect(() => {
+        const handler = () => setWidth(viewport.getWidth());
+        const removeHandler = viewport.onResize(handler);
+        return () => {
+            removeHandler();
+        };
+    }, []);
+    return width;
+};
+export default useViewport;
+//# sourceMappingURL=useViewport.js.map

package/dist/useViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewport.js","sourceRoot":"","sources":["../src/useViewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,WAAW,GAAG,GAAG,EAAE;IACvB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;IAExD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;QACpD,MAAM,aAAa,GAAG,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAEjD,OAAO,GAAG,EAAE;YACV,aAAa,EAAE,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/viewport.d.ts

@@ -0,0 +1,11 @@
+declare class ViewportHelper {
+    private width;
+    private eventHandlers;
+    constructor();
+    private handleResize;
+    getWidth(): number;
+    onResize(handler: () => void): () => void;
+}
+declare const viewportHelper: ViewportHelper;
+export default viewportHelper;
+//# sourceMappingURL=viewport.d.ts.map

package/dist/viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.d.ts","sourceRoot":"","sources":["../src/viewport.ts"],"names":[],"mappings":"AAAA,cAAM,cAAc;IAClB,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,aAAa,CAAiB;;IAUtC,OAAO,CAAC,YAAY,CAGlB;IAEF,QAAQ;IAIR,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI;CAM7B;AAED,QAAA,MAAM,cAAc,gBAAuB,CAAC;AAC5C,eAAe,cAAc,CAAC"}

package/dist/viewport.js

@@ -0,0 +1,25 @@
+class ViewportHelper {
+    constructor() {
+        this.handleResize = () => {
+            this.width = window.innerWidth;
+            this.eventHandlers.forEach(handler => handler());
+        };
+        this.width = typeof window !== 'undefined' ? window.innerWidth : 0;
+        this.eventHandlers = [];
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', this.handleResize);
+        }
+    }
+    getWidth() {
+        return this.width;
+    }
+    onResize(handler) {
+        this.eventHandlers.push(handler);
+        return () => {
+            this.eventHandlers = this.eventHandlers.filter(h => h !== handler);
+        };
+    }
+}
+const viewportHelper = new ViewportHelper();
+export default viewportHelper;
+//# sourceMappingURL=viewport.js.map

package/dist/viewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.js","sourceRoot":"","sources":["../src/viewport.ts"],"names":[],"mappings":"AAAA,MAAM,cAAc;IAIlB;QAQQ,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC;YAC/B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;QACnD,CAAC,CAAC;QAVA,IAAI,CAAC,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QACnE,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;QACxB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACvD,CAAC;IACH,CAAC;IAOD,QAAQ;QACN,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAED,QAAQ,CAAC,OAAmB;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACjC,OAAO,GAAG,EAAE;YACV,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC;QACrE,CAAC,CAAC;IACJ,CAAC;CACF;AAED,MAAM,cAAc,GAAG,IAAI,cAAc,EAAE,CAAC;AAC5C,eAAe,cAAc,CAAC"}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "breakpoint-utils",
+  "version": "1.0.0",
+  "description": "Viewport width utility with breakpoint functions for React",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "breakpoints",
+    "viewport",
+    "responsive",
+    "react"
+  ],
+  "license": "MIT"
+}

package/src/breakpoints.ts

@@ -0,0 +1,75 @@
+import viewport from './viewport';
+
+const defaultBreakpoints = {
+  xs: 480,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+} as const;
+
+export type Breakpoints = Record<string, number>;
+
+let currentBreakpoints: Breakpoints = { ...defaultBreakpoints };
+let sortedBreakpoints: [string, number][] = [];
+
+const updateSortedBreakpoints = () => {
+  sortedBreakpoints = Object.entries(currentBreakpoints).sort((a, b) => a[1] - b[1]);
+};
+
+updateSortedBreakpoints();
+
+export const configure = <T extends Breakpoints>(customBreakpoints: T) => {
+  currentBreakpoints = customBreakpoints;
+  updateSortedBreakpoints();
+};
+
+export const getBreakpoints = () => currentBreakpoints;
+
+const validateBreakpoint = (size: string): void => {
+  if (!(size in currentBreakpoints)) {
+    throw new Error(`Invalid breakpoint: "${size}". Available breakpoints: ${Object.keys(currentBreakpoints).join(', ')}`);
+  }
+};
+
+const getNextBreakpoint = (size: string): number => {
+  const currentIndex = sortedBreakpoints.findIndex(([name]) => name === size);
+  const next = sortedBreakpoints[currentIndex + 1];
+  return next ? next[1] : Infinity;
+};
+
+export const up = (size: string) => {
+  validateBreakpoint(size);
+  return viewport.getWidth() >= currentBreakpoints[size];
+};
+
+export const down = (size: string) => {
+  validateBreakpoint(size);
+  return viewport.getWidth() < currentBreakpoints[size];
+};
+
+export const only = (size: string) => {
+  validateBreakpoint(size);
+  const width = viewport.getWidth();
+  const min = currentBreakpoints[size];
+  const max = getNextBreakpoint(size);
+  return width >= min && width < max;
+};
+
+export const not = (size: string) => {
+  validateBreakpoint(size);
+  const width = viewport.getWidth();
+  const min = currentBreakpoints[size];
+  const max = getNextBreakpoint(size);
+  return width < min || width >= max;
+};
+
+export const between = (minSize: string, maxSize: string) => {
+  validateBreakpoint(minSize);
+  validateBreakpoint(maxSize);
+  const width = viewport.getWidth();
+  const min = currentBreakpoints[minSize];
+  const max = currentBreakpoints[maxSize];
+  return width >= min && width < max;
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+export { configure, getBreakpoints, up, down, only, not, between } from './breakpoints';
+export type { Breakpoints } from './breakpoints';
+export { default as useViewport } from './useViewport';
+export { default as viewport } from './viewport';

package/src/useViewport.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+import viewport from './viewport';
+
+const useViewport = () => {
+  const [width, setWidth] = useState(viewport.getWidth());
+
+  useEffect(() => {
+    const handler = () => setWidth(viewport.getWidth());
+    const removeHandler = viewport.onResize(handler);
+
+    return () => {
+      removeHandler();
+    };
+  }, []);
+
+  return width;
+};
+
+export default useViewport;

package/src/viewport.ts

@@ -0,0 +1,31 @@
+class ViewportHelper {
+  private width: number;
+  private eventHandlers: (() => void)[];
+
+  constructor() {
+    this.width = typeof window !== 'undefined' ? window.innerWidth : 0;
+    this.eventHandlers = [];
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', this.handleResize);
+    }
+  }
+
+  private handleResize = () => {
+    this.width = window.innerWidth;
+    this.eventHandlers.forEach(handler => handler());
+  };
+
+  getWidth() {
+    return this.width;
+  }
+
+  onResize(handler: () => void) {
+    this.eventHandlers.push(handler);
+    return () => {
+      this.eventHandlers = this.eventHandlers.filter(h => h !== handler);
+    };
+  }
+}
+
+const viewportHelper = new ViewportHelper();
+export default viewportHelper;

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "lib": ["DOM", "ES2018"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}