react-responsive-tools 2.5.1 → 2.6.1

package/README.MD

@@ -8,10 +8,6 @@ The package is based on [react-responsive](https://www.npmjs.com/package/react-r
 
 To install the project, run the following command:
 
-### Установка
-
-Пожалуйста, убедитесь, что вы установили следующие зависимости:
-
 ```sh
 yarn add react-responsive
 ```
@@ -58,6 +54,16 @@ This command will run the `reinit.sh` script, which will recreate the necessary
 
 The following horizontal and vertical breakpoints are provided by default:
 
+### Preferred Adaptive Variant (`PREFERRED_VARIANT`)
+
+By default, the library uses the following preferred adaptive variant:
+
+```ts 
+    // DESKTOP_TO_FIRST or MOBILE_TO_FIRST
+    // TAdaptiveVariant = Dtf | MtF
+    export const PREFERRED_VARIANT: TAdaptiveVariant = 'DtF';  
+```
+
 #### Horizontal Breakpoints
 
 ```typescript
@@ -107,38 +113,29 @@ const MyComponent = () => {
 };
 ```
 
-#### Hook `useBreakpointMF`
-
-```typescript
-import { useBreakpointMF } from 'react-responsive-tools';
+#### Hook `useBreakpointBetween`
 
-// Usage Example
-const MyComponent = () => {
-    const isMedium = useBreakpointMF('md');
+`useBreakpointBetween` is an optimized hook for checking whether the current
+viewport is between two breakpoints (`min` and `max`).
 
-    return (
-        <div>
-            {isMedium && <p>Current breakpoint: Medium (md) for Mobile First</p>}
-        </div>
-    );
-};
-```
+It is especially useful as a safe replacement for combining `useBreakpoint`
+with both mobile-first (`For`) and desktop-first (`Before`) logic, where
+their ranges would otherwise overlap at the same pixel (for example,
+`min-width: 300px` and `max-width: 300px` both including 300px).
 
-#### Hook `useBreakpointDF`
+Internally the hook adjusts one of the boundaries by `1px` based on
+the preferred adaptive variant (`PREFERRED_VARIANT`) to ensure that
+a particular pixel falls into only one range.
 
 ```typescript
-import { useBreakpointDF } from 'react-responsive-tools';
-
-// Usage Example
-const MyComponent = () => {
-    const isLarge = useBreakpointDF('lg');
-
-    return (
-        <div>
-            {isLarge && <p>Current breakpoint: Large (lg) for Desktop First</p>}
-        </div>
-    );
-};
+    import { useBreakpointBetween } from 'react-responsive-tools';
+
+    const MyComponent = () => { 
+        const isVisible = useBreakpointBetween('sm', 'lg');
+        return (
+            {isVisible && Visible only between "sm" and "lg" breakpoints}
+        ); 
+    };
 ```
 
 #### Hook `useVBreakpoint`
@@ -158,40 +155,6 @@ const MyComponent = () => {
 };
 ```
 
-#### Hook `useVBreakpointMF`
-
-```typescript
-import { useVBreakpointMF } from 'react-responsive-tools';
-
-// Usage Example
-const MyComponent = () => {
-    const isMedium = useVBreakpointMF('md');
-
-    return (
-        <div>
-            {isMedium && <p>Current vertical breakpoint: Medium (md) for Mobile First</p>}
-        </div>
-    );
-};
-```
-
-#### Hook `useVBreakpointDF`
-
-```typescript
-import { useVBreakpointDF } from 'react-responsive-tools';
-
-// Usage Example
-const MyComponent = () => {
-    const isLarge = useVBreakpointDF('lg');
-
-    return (
-        <div>
-            {isLarge && <p>Current vertical breakpoint: Large (lg) for Desktop First</p>}
-        </div>
-    );
-};
-```
-
 ### Using Components
 
 #### Component `For`
@@ -232,6 +195,37 @@ const CustomSizeComponent = () => (
 );
 ```
 
+#### Component `Between`
+
+`Between` is a convenience component built on top of `useBreakpointBetween`.
+It renders its children only when the viewport width is between `min` and `max`.
+
+Compared to combining `For` and `Before`, `Between` automatically applies the
+1px shift logic to avoid overlapping ranges.
+
+```tsx
+import React from 'react';
+
+import { Between } from 'react-responsive-tools';
+
+/**
+ * Visible only on tablet widths: from "sm" (576px) up to "lg" (992px)
+ * with a safe 1px gap between adjacent ranges.
+ */
+export function TabletOnlyBanner() {
+    return (
+        <Between min="sm" max="lg">
+            <section className="tablet-banner">
+                <h2>Tablet-only promo</h2>
+                <p>
+                    This banner is visible only between the <code>sm</code> and <code>lg</code> breakpoints.
+                </p>
+            </section>
+        </Between>
+    );
+}
+```
+
 ### Breakpoint Types
 
 ```typescript

package/dist/breakpoints.config.d.ts

@@ -1,3 +1,21 @@
+import { TAdaptiveVariant } from "./interfaces/TAdaptiveVariant";
+/**
+ * Preferred adaptive layout variant.
+ *
+ * 'DtF' stands for "Desktop To First" and is used as the default strategy
+ * for resolving overlaps between "mobile-first" (`min-width`) and
+ * "desktop-first" (`max-width`) breakpoints.
+ *
+ * When switching between these variants we shift the opposite boundary
+ * by 1px to avoid cases when two ranges overlap at the exact same pixel.
+ *
+ * For example:
+ *  - `min-width: 300px` includes 300px,
+ *  - `max-width: 300px` also includes 300px,
+ * which causes an overlap. By shifting one of them by 1px we guarantee
+ * that a given pixel belongs to only one range.
+ */
+export declare const PREFERRED_VARIANT: TAdaptiveVariant;
 declare const HORIZONTAL_BREAKPOINTS: Record<string, string>;
 declare const VERTICAL_BREAKPOINTS: Record<string, string>;
 export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS };

package/dist/breakpoints.config.js

@@ -1,4 +1,21 @@
 // src/breakpoints.config.ts
+/**
+ * Preferred adaptive layout variant.
+ *
+ * 'DtF' stands for "Desktop To First" and is used as the default strategy
+ * for resolving overlaps between "mobile-first" (`min-width`) and
+ * "desktop-first" (`max-width`) breakpoints.
+ *
+ * When switching between these variants we shift the opposite boundary
+ * by 1px to avoid cases when two ranges overlap at the exact same pixel.
+ *
+ * For example:
+ *  - `min-width: 300px` includes 300px,
+ *  - `max-width: 300px` also includes 300px,
+ * which causes an overlap. By shifting one of them by 1px we guarantee
+ * that a given pixel belongs to only one range.
+ */
+export const PREFERRED_VARIANT = 'DtF'; // DESKTOP_TO_FIRST
 const HORIZONTAL_BREAKPOINTS = {
     "xs": "320px",
     "sm": "576px",

package/dist/components/horizontal.d.ts

@@ -5,10 +5,39 @@ import React from "react";
 import { TBreakpoint } from '../interfaces/TBreakpoint';
 interface Props {
     children: React.ReactNode;
-}
-interface ForComponentProps extends Props {
     p: TBreakpoint | number;
 }
-export declare function For({ children, p }: ForComponentProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function Before({ children, p }: ForComponentProps): import("react/jsx-runtime").JSX.Element | null;
+interface BetweenProps {
+    children: React.ReactNode;
+    max: TBreakpoint | number;
+    min: TBreakpoint | number;
+}
+/**
+ * Renders children only when the current viewport matches
+ * the given breakpoint using the mobile-first ("MtF") strategy.
+ *
+ * Internally it uses {@link useBreakpoint} with variant "MtF".
+ */
+export declare function For({ children, p }: Props): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Renders children only when the current viewport matches
+ * the given breakpoint using the desktop-first ("DtF") strategy.
+ *
+ * Internally it uses {@link useBreakpoint} with variant "DtF".
+ */
+export declare function Before({ children, p }: Props): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Renders children only when the current viewport is between
+ * two breakpoints (`min` and `max`).
+ *
+ * This component is an optimized alternative to combining `For`
+ * and `Before` when their ranges would overlap at the same pixel
+ * (e.g. `min-width: 300px` and `max-width: 300px` both including 300px).
+ *
+ * Under the hood it uses {@link useBreakpointBetween}, which shifts
+ * one of the boundaries by 1px depending on the preferred adaptive
+ * variant (see {@link PREFERRED_VARIANT}) to guarantee that a given
+ * pixel belongs to only one logical range.
+ */
+export declare function Between({ children, min, max }: BetweenProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/horizontal.js

@@ -3,15 +3,46 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Created by westp on 15.05.2023
  */
 import { Fragment } from "react";
-import { useBreakpointDF, useBreakpointMF } from '../hooks/useBreakpoint.js';
+import { useBreakpoint, useBreakpointBetween } from '../hooks/useBreakpoint';
+/**
+ * Renders children only when the current viewport matches
+ * the given breakpoint using the mobile-first ("MtF") strategy.
+ *
+ * Internally it uses {@link useBreakpoint} with variant "MtF".
+ */
 export function For({ children, p }) {
-    const is = useBreakpointMF(p);
+    const is = useBreakpoint(p, 'MtF');
     if (is)
         return _jsx(Fragment, { children: children });
     return null;
 }
+/**
+ * Renders children only when the current viewport matches
+ * the given breakpoint using the desktop-first ("DtF") strategy.
+ *
+ * Internally it uses {@link useBreakpoint} with variant "DtF".
+ */
 export function Before({ children, p }) {
-    const is = useBreakpointDF(p);
+    const is = useBreakpoint(p, 'DtF');
+    if (is)
+        return _jsx(Fragment, { children: children });
+    return null;
+}
+/**
+ * Renders children only when the current viewport is between
+ * two breakpoints (`min` and `max`).
+ *
+ * This component is an optimized alternative to combining `For`
+ * and `Before` when their ranges would overlap at the same pixel
+ * (e.g. `min-width: 300px` and `max-width: 300px` both including 300px).
+ *
+ * Under the hood it uses {@link useBreakpointBetween}, which shifts
+ * one of the boundaries by 1px depending on the preferred adaptive
+ * variant (see {@link PREFERRED_VARIANT}) to guarantee that a given
+ * pixel belongs to only one logical range.
+ */
+export function Between({ children, min, max }) {
+    const is = useBreakpointBetween(min, max);
     if (is)
         return _jsx(Fragment, { children: children });
     return null;

package/dist/default.config.d.ts

@@ -1,3 +1,5 @@
+import { TAdaptiveVariant } from "./interfaces/TAdaptiveVariant";
+declare const PREFERRED_VARIANT: TAdaptiveVariant;
 declare const HORIZONTAL_BREAKPOINTS: Record<string, string>;
 declare const VERTICAL_BREAKPOINTS: Record<string, string>;
-export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS };
+export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS, PREFERRED_VARIANT };

package/dist/default.config.js

@@ -1,4 +1,5 @@
 // breakpointConfig.js
+const PREFERRED_VARIANT = 'DtF'; // DESKTOP_TO_FIRST
 const HORIZONTAL_BREAKPOINTS = {
     xs: '320px',
     sm: '576px',
@@ -19,4 +20,4 @@ const VERTICAL_BREAKPOINTS = {
     xl: '1600px',
     xxl: '1601px',
 };
-export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS };
+export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS, PREFERRED_VARIANT };

package/dist/functions/getBreakpoint.d.ts

@@ -1,3 +1,3 @@
 import { TBreakpoint, TVerticalBreakpoint } from '../interfaces/TBreakpoint.js';
-export default function getBreakpoint(b: TBreakpoint): string;
+export declare function getBreakpoint(b: TBreakpoint): string;
 export declare function getVBreakpoint(b: TVerticalBreakpoint): string;

package/dist/functions/getBreakpoint.js

@@ -1,5 +1,5 @@
 import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from '../breakpoints.config.js';
-export default function getBreakpoint(b) {
+export function getBreakpoint(b) {
     return HORIZONTAL_BREAKPOINTS[b];
 }
 export function getVBreakpoint(b) {

package/dist/hooks/useBreakpoint.d.ts

@@ -1,5 +1,53 @@
-import { TBreakpoint } from '../interfaces/TBreakpoint.js';
-import { TAdaptiveVariant } from '../interfaces/TAdaptiveVariant.js';
-export declare function useBreakpoint(b: TBreakpoint | number, variant?: TAdaptiveVariant): boolean;
-export declare function useBreakpointMF(b: TBreakpoint | number): boolean;
-export declare function useBreakpointDF(b: TBreakpoint | number): boolean;
+import { TBreakpoint } from '../interfaces/TBreakpoint';
+import { TAdaptiveVariant } from '../interfaces/TAdaptiveVariant';
+/**
+ * Low-level hook that checks if the current viewport matches a horizontal breakpoint.
+ *
+ * It supports:
+ *  - named breakpoints (e.g. "md", "lg"),
+ *  - custom numeric pixel values (e.g. 768).
+ *
+ * The check is performed using `react-responsive` and the current adaptive variant:
+ *  - for mobile-first (MtF) the hook uses `min-width`,
+ *  - for desktop-first (DtF) the hook uses `max-width`.
+ *
+ * To avoid overlap between opposite variants (e.g. `min-width: 300px` and
+ * `max-width: 300px` both including 300px), the hook shifts the opposite
+ * boundary by 1px when the requested variant differs from `PREFERRED_VARIANT`.
+ *
+ * @param b Breakpoint name or explicit pixel value.
+ * @param variant Adaptive variant: "MtF" (mobile to first) or "DtF" (desktop to first).
+ *                By default, uses {@link PREFERRED_VARIANT}.
+ * @returns `true` if the media query matches, otherwise `false` or `null`
+ *          (depending on `react-responsive` behavior).
+ */
+export declare function useBreakpoint(b: TBreakpoint | number, variant?: TAdaptiveVariant): boolean | null;
+/**
+ * Optimized hook for checking if the current viewport is between two breakpoints.
+ *
+ * This hook is designed as a safe alternative to using a combination of
+ * `For` (mobile-first) and `Before` (desktop-first) when their ranges would
+ * otherwise overlap.
+ *
+ * Example of the overlap problem:
+ *  - `min-width: 300px` includes 300px,
+ *  - `max-width: 300px` also includes 300px,
+ * so both conditions are `true` at exactly 300px.
+ *
+ * To prevent this, {@link useBreakpointBetween} automatically shifts the
+ * opposite boundary by 1px depending on the adaptive variant:
+ *
+ *  - preferredVariant === "MtF":
+ *      max = max - 1 (so the upper bound becomes exclusive by 1px),
+ *  - preferredVariant === "DtF":
+ *      min = min - 1 (so the lower bound becomes exclusive by 1px),
+ *
+ * ensuring that a particular pixel belongs to only one logical range.
+ *
+ * @param min Lower breakpoint (inclusive in the original definition).
+ * @param max Upper breakpoint (inclusive in the original definition).
+ * @param preferredVariant Adaptive variant used to resolve the 1px overlap.
+ *                         By default, uses {@link PREFERRED_VARIANT}.
+ * @returns `true` if the viewport width is within the adjusted [min, max] range.
+ */
+export declare function useBreakpointBetween(min: TBreakpoint | number, max: TBreakpoint | number, preferredVariant?: TAdaptiveVariant): boolean;

package/dist/hooks/useBreakpoint.js

@@ -1,14 +1,73 @@
 import { useMediaQuery } from 'react-responsive';
-import useVariant from './useVariant.js';
-import getBreakpoint from "../functions/getBreakpoint.js";
-export function useBreakpoint(b, variant = 'MtF') {
-    const _bp = typeof b === 'number' ? b + 'px' : getBreakpoint(b);
+import { PREFERRED_VARIANT } from '../breakpoints.config';
+import useVariant from './useVariant';
+import { getBreakpoint } from "../functions/getBreakpoint";
+/**
+ * Low-level hook that checks if the current viewport matches a horizontal breakpoint.
+ *
+ * It supports:
+ *  - named breakpoints (e.g. "md", "lg"),
+ *  - custom numeric pixel values (e.g. 768).
+ *
+ * The check is performed using `react-responsive` and the current adaptive variant:
+ *  - for mobile-first (MtF) the hook uses `min-width`,
+ *  - for desktop-first (DtF) the hook uses `max-width`.
+ *
+ * To avoid overlap between opposite variants (e.g. `min-width: 300px` and
+ * `max-width: 300px` both including 300px), the hook shifts the opposite
+ * boundary by 1px when the requested variant differs from `PREFERRED_VARIANT`.
+ *
+ * @param b Breakpoint name or explicit pixel value.
+ * @param variant Adaptive variant: "MtF" (mobile to first) or "DtF" (desktop to first).
+ *                By default, uses {@link PREFERRED_VARIANT}.
+ * @returns `true` if the media query matches, otherwise `false` or `null`
+ *          (depending on `react-responsive` behavior).
+ */
+export function useBreakpoint(b, variant = PREFERRED_VARIANT) {
+    let _bp = typeof b === 'number' ? b : +getBreakpoint(b);
     const v = useVariant(variant);
-    return useMediaQuery({ query: `(${v}-width: ${_bp})` });
+    if (variant !== PREFERRED_VARIANT)
+        _bp = _bp - 1;
+    return useMediaQuery({ query: `(${v}-width: ${_bp}px)` });
 }
-export function useBreakpointMF(b) {
-    return useBreakpoint(b, 'MtF');
-}
-export function useBreakpointDF(b) {
-    return useBreakpoint(b, 'DtF');
+/**
+ * Optimized hook for checking if the current viewport is between two breakpoints.
+ *
+ * This hook is designed as a safe alternative to using a combination of
+ * `For` (mobile-first) and `Before` (desktop-first) when their ranges would
+ * otherwise overlap.
+ *
+ * Example of the overlap problem:
+ *  - `min-width: 300px` includes 300px,
+ *  - `max-width: 300px` also includes 300px,
+ * so both conditions are `true` at exactly 300px.
+ *
+ * To prevent this, {@link useBreakpointBetween} automatically shifts the
+ * opposite boundary by 1px depending on the adaptive variant:
+ *
+ *  - preferredVariant === "MtF":
+ *      max = max - 1 (so the upper bound becomes exclusive by 1px),
+ *  - preferredVariant === "DtF":
+ *      min = min - 1 (so the lower bound becomes exclusive by 1px),
+ *
+ * ensuring that a particular pixel belongs to only one logical range.
+ *
+ * @param min Lower breakpoint (inclusive in the original definition).
+ * @param max Upper breakpoint (inclusive in the original definition).
+ * @param preferredVariant Adaptive variant used to resolve the 1px overlap.
+ *                         By default, uses {@link PREFERRED_VARIANT}.
+ * @returns `true` if the viewport width is within the adjusted [min, max] range.
+ */
+export function useBreakpointBetween(min, max, preferredVariant = PREFERRED_VARIANT) {
+    let _min = typeof min === 'number' ? min : +getBreakpoint(min);
+    let _max = typeof max === 'number' ? max : +getBreakpoint(max);
+    switch (preferredVariant) {
+        case 'MtF':
+            _max = _max - 1;
+            break;
+        case 'DtF':
+            _min = _min - 1;
+            break;
+    }
+    return useMediaQuery({ minWidth: _min, maxWidth: _max });
 }

package/dist/hooks/useBreakpoint.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useBreakpoint.test.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { useBreakpoint, useBreakpointBetween } from './useBreakpoint';
+// Mock external dependencies
+jest.mock('react-responsive', () => ({
+    useMediaQuery: jest.fn(),
+}));
+jest.mock('./useVariant', () => ({
+    __esModule: true,
+    default: jest.fn(),
+}));
+jest.mock('../functions/getBreakpoint', () => ({
+    __esModule: true,
+    getBreakpoint: jest.fn(),
+}));
+jest.mock('../breakpoints.config', () => ({
+    __esModule: true,
+    PREFERRED_VARIANT: 'MtF', // adjust to your real preferred variant if needed
+}));
+import { useMediaQuery } from 'react-responsive';
+import useVariant from './useVariant';
+import { getBreakpoint } from '../functions/getBreakpoint';
+import { PREFERRED_VARIANT } from '../breakpoints.config';
+const mockedUseMediaQuery = useMediaQuery;
+const mockedUseVariant = useVariant;
+const mockedGetBreakpoint = getBreakpoint;
+// Small test components to use hooks inside React
+function BreakpointTestComponent(props) {
+    const value = useBreakpoint(props.b, props.variant);
+    return _jsx("div", { "data-testid": "value", children: String(value) });
+}
+function BreakpointBetweenTestComponent(props) {
+    const value = useBreakpointBetween(props.min, props.max, props.preferredVariant);
+    return _jsx("div", { "data-testid": "value", children: String(value) });
+}
+describe('useBreakpoint', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockedUseVariant.mockReturnValue('min');
+    });
+    it('should call useMediaQuery with numeric breakpoint as-is when variant === PREFERRED_VARIANT', () => {
+        mockedUseMediaQuery.mockReturnValue(true);
+        const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 768, variant: PREFERRED_VARIANT }));
+        expect(mockedUseVariant).toHaveBeenCalledWith(PREFERRED_VARIANT);
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            query: '(min-width: 768px)',
+        });
+        expect(getByTestId('value').textContent).toBe('true');
+    });
+    it('should convert named breakpoint using getBreakpoint', () => {
+        mockedGetBreakpoint.mockReturnValue('1024');
+        mockedUseMediaQuery.mockReturnValue(false);
+        const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 'lg', variant: PREFERRED_VARIANT }));
+        expect(mockedGetBreakpoint).toHaveBeenCalledWith('lg');
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            query: '(min-width: 1024px)',
+        });
+        expect(getByTestId('value').textContent).toBe('false');
+    });
+    it('should decrease breakpoint by 1px when variant !== PREFERRED_VARIANT (numeric)', () => {
+        mockedUseVariant.mockReturnValue('max');
+        mockedUseMediaQuery.mockReturnValue(true);
+        const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 500, variant: 'DtF' }));
+        expect(mockedUseVariant).toHaveBeenCalledWith('DtF');
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            query: '(max-width: 499px)',
+        });
+        expect(getByTestId('value').textContent).toBe('true');
+    });
+    it('should also decrease named breakpoint by 1px when variant !== PREFERRED_VARIANT', () => {
+        mockedGetBreakpoint.mockReturnValue('600');
+        mockedUseVariant.mockReturnValue('max');
+        mockedUseMediaQuery.mockReturnValue(false);
+        const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 'md', variant: 'DtF' }));
+        expect(mockedGetBreakpoint).toHaveBeenCalledWith('md');
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            query: '(max-width: 599px)',
+        });
+        expect(getByTestId('value').textContent).toBe('false');
+    });
+});
+describe('useBreakpointBetween', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should use min and max as-is when preferredVariant === PREFERRED_VARIANT (numeric)', () => {
+        mockedUseMediaQuery.mockReturnValue(true);
+        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant: PREFERRED_VARIANT }));
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            minWidth: 320,
+            maxWidth: 767, // 768 - 1 because PREFERRED_VARIANT === 'MtF'
+        });
+        expect(getByTestId('value').textContent).toBe('true');
+    });
+    it('should convert named min and max via getBreakpoint when preferredVariant === PREFERRED_VARIANT', () => {
+        mockedGetBreakpoint
+            .mockReturnValueOnce('320') // for min
+            .mockReturnValueOnce('768'); // for max
+        mockedUseMediaQuery.mockReturnValue(false);
+        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 'sm', max: 'md', preferredVariant: PREFERRED_VARIANT }));
+        expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(1, 'sm');
+        expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(2, 'md');
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            minWidth: 320,
+            maxWidth: 767, // 768 - 1 because PREFERRED_VARIANT === 'MtF'
+        });
+        expect(getByTestId('value').textContent).toBe('false');
+    });
+    it('for preferredVariant === "MtF" should decrease max by 1px', () => {
+        mockedUseMediaQuery.mockReturnValue(true);
+        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant: 'MtF' }));
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            minWidth: 320,
+            maxWidth: 767,
+        });
+        expect(getByTestId('value').textContent).toBe('true');
+    });
+    it('for preferredVariant === "DtF" should decrease min by 1px', () => {
+        mockedUseMediaQuery.mockReturnValue(false);
+        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant: 'DtF' }));
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            minWidth: 319,
+            maxWidth: 768,
+        });
+        expect(getByTestId('value').textContent).toBe('false');
+    });
+    it('MtF + named values: should decrease max after getBreakpoint', () => {
+        mockedGetBreakpoint
+            .mockReturnValueOnce('400') // min
+            .mockReturnValueOnce('900'); // max
+        mockedUseMediaQuery.mockReturnValue(true);
+        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 'sm', max: 'xl', preferredVariant: 'MtF' }));
+        expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(1, 'sm');
+        expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(2, 'xl');
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            minWidth: 400,
+            maxWidth: 899,
+        });
+        expect(getByTestId('value').textContent).toBe('true');
+    });
+    it('DtF + named values: should decrease min after getBreakpoint', () => {
+        mockedGetBreakpoint
+            .mockReturnValueOnce('400') // min
+            .mockReturnValueOnce('900'); // max
+        mockedUseMediaQuery.mockReturnValue(false);
+        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 'sm', max: 'xl', preferredVariant: 'DtF' }));
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            minWidth: 399,
+            maxWidth: 900,
+        });
+        expect(getByTestId('value').textContent).toBe('false');
+    });
+});

package/dist/hooks/useVBreakpoint.d.ts

@@ -1,5 +1,3 @@
 import { TVerticalBreakpoint } from '../interfaces/TBreakpoint';
 import { TAdaptiveVariant } from '../interfaces/TAdaptiveVariant';
-export default function useVBreakpoint(b: TVerticalBreakpoint | number, variant?: TAdaptiveVariant): boolean;
-export declare function useVBreakpointMF(b: TVerticalBreakpoint | number): boolean;
-export declare function useVBreakpointDF(b: TVerticalBreakpoint | number): boolean;
+export declare function useVBreakpoint(b: TVerticalBreakpoint | number, variant?: TAdaptiveVariant): boolean;

package/dist/hooks/useVBreakpoint.js

@@ -1,14 +1,8 @@
 import { useMediaQuery } from 'react-responsive';
 import useVariant from './useVariant.js';
 import { getVBreakpoint } from "../functions/getBreakpoint.js";
-export default function useVBreakpoint(b, variant = 'MtF') {
+export function useVBreakpoint(b, variant = 'MtF') {
     const _bp = typeof b === 'number' ? b + 'px' : getVBreakpoint(b);
     const v = useVariant(variant);
     return useMediaQuery({ query: `(${v}-height: ${_bp})` });
 }
-export function useVBreakpointMF(b) {
-    return useVBreakpoint(b, 'MtF');
-}
-export function useVBreakpointDF(b) {
-    return useVBreakpoint(b, 'DtF');
-}

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import { TBreakpoint, TVerticalBreakpoint } from './interfaces/TBreakpoint';
 import { TBreakpoints, TVerticalBreakpoints } from './interfaces/TBreakpoints';
-export * from './hooks/useBreakpoint.js';
-export * from './hooks/useVBreakpoint.js';
+import { useBreakpointBetween, useBreakpoint } from './hooks/useBreakpoint.js';
+import { useVBreakpoint } from './hooks/useVBreakpoint.js';
+import { getBreakpoint, getVBreakpoint } from './functions/getBreakpoint.js';
 export type { TBreakpoints, TBreakpoint, TVerticalBreakpoint, TVerticalBreakpoints, };
+export { useBreakpointBetween, useBreakpoint, useVBreakpoint, getBreakpoint, getVBreakpoint, };
 export * from './components/horizontal.js';

package/dist/index.js

@@ -1,3 +1,5 @@
-export * from './hooks/useBreakpoint.js';
-export * from './hooks/useVBreakpoint.js';
+import { useBreakpointBetween, useBreakpoint } from './hooks/useBreakpoint.js';
+import { useVBreakpoint } from './hooks/useVBreakpoint.js';
+import { getBreakpoint, getVBreakpoint } from './functions/getBreakpoint.js';
+export { useBreakpointBetween, useBreakpoint, useVBreakpoint, getBreakpoint, getVBreakpoint, };
 export * from './components/horizontal.js';

package/dist/scripts/createConfig.mjs

@@ -1 +1 @@
-import o from"fs";import n from"path";import{fileURLToPath as e}from"url";import{HORIZONTAL_BREAKPOINTS as r,VERTICAL_BREAKPOINTS as i}from"../default.config.js";const s=e(import.meta.url),l=n.dirname(s),t=n.resolve(l,"../../../../breakpoints.config.js");(async()=>{let e=r,s=i;if(o.existsSync(t))try{console.log(`User config file found at: ${t}`);const o=await import(t);console.log(`Loaded user config: ${JSON.stringify(o,null,2)}`),o.HORIZONTAL_BREAKPOINTS?(e=o.HORIZONTAL_BREAKPOINTS,console.log("Using user provided horizontal breakpoints.")):console.log("Using default horizontal breakpoints."),o.VERTICAL_BREAKPOINTS?(s=o.VERTICAL_BREAKPOINTS,console.log("Using user provided vertical breakpoints.")):console.log("Using default vertical breakpoints.")}catch(o){console.error("Error loading user config:",o)}else console.log(`User config file not found at: ${t}. Using default breakpoints.`);const c=`\n// breakpoints.config.mjs\nconst HORIZONTAL_BREAKPOINTS = ${JSON.stringify(e,null,2)};\n\nconst VERTICAL_BREAKPOINTS = ${JSON.stringify(s,null,2)};\n\nexport { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS };\n`;try{o.writeFileSync(n.resolve(l,"../breakpoints.config.js"),c),console.log("Config file has been generated successfully.")}catch(o){console.error("Error writing merged config file:",o)}})();
+import o from"fs";import n from"path";import{fileURLToPath as e}from"url";import{HORIZONTAL_BREAKPOINTS as r,VERTICAL_BREAKPOINTS as s,PREFERRED_VARIANT as i}from"../default.config.js";const l=e(import.meta.url),t=n.dirname(l),R=n.resolve(t,"../../../../breakpoints.config.js");(async()=>{let e=r,l=s,a=i;if(o.existsSync(R))try{console.log(`User config file found at: ${R}`);const o=await import(R);console.log(`Loaded user config: ${JSON.stringify(o,null,2)}`),o.HORIZONTAL_BREAKPOINTS?(e=o.HORIZONTAL_BREAKPOINTS,console.log("Using user provided horizontal breakpoints.")):console.log("Using default horizontal breakpoints."),o.VERTICAL_BREAKPOINTS?(l=o.VERTICAL_BREAKPOINTS,console.log("Using user provided vertical breakpoints.")):console.log("Using default vertical breakpoints."),o.PREFERRED_VARIANT?(a=o.PREFERRED_VARIANT,console.log("Using user provided preferred variant.")):console.log("Using default preferred variant.")}catch(o){console.error("Error loading user config:",o)}else console.log(`User config file not found at: ${R}. Using default breakpoints.`);const c=`\n    // breakpoints.config.mjs\n    const HORIZONTAL_BREAKPOINTS = ${JSON.stringify(e,null,2)};\n\n    const VERTICAL_BREAKPOINTS = ${JSON.stringify(l,null,2)};\n\n    const PREFERRED_VARIANT = ${JSON.stringify(a)};\n\n    export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS, PREFERRED_VARIANT };\n    `;try{o.writeFileSync(n.resolve(t,"../breakpoints.config.js"),c),console.log("Config file has been generated successfully.")}catch(o){console.error("Error writing merged config file:",o)}})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-tools",
-  "version": "2.5.1",
+  "version": "2.6.1",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -43,11 +43,13 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^22.5.4",
+    "@types/react": "^19.1.8",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.5.0",
     "@typescript-eslint/parser": "^8.5.0",
@@ -69,6 +71,7 @@
     "glob": "^11.0.0",
     "husky": "^9.1.5",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^30.2.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-responsive": "^10.0.1",
@@ -83,10 +86,13 @@
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4"
   },
+  "resolutions": {
+    "string-width": "4.2.3",
+    "string-length": "4.0.2",
+    "strip-ansi": "6.0.1",
+    "wrap-ansi": "7.0.0"
+  },
   "bin": {
     "react-responsive-tools": "bin/react-responsive-tools.mjs"
-  },
-  "dependencies": {
-    "@types/react": "^19.1.8"
   }
 }