match-breakpoint 1.0.0-canary.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Oleg Putseiko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,169 @@
+<div align="center">
+
+# match-breakpoint
+
+[![Latest Release](https://badgen.net/github/release/oleg-putseiko/match-breakpoint?icon=github&cache=240)](https://github.com/oleg-putseiko/match-breakpoint/releases)
+[![Total Downloads](https://badgen.net/npm/dt/match-breakpoint?icon=npm&cache=240)](https://www.npmjs.com/package/match-breakpoint)
+[![Install Size](https://badgen.net/packagephobia/install/match-breakpoint?color=purple&cache=240)](https://www.npmjs.com/package/match-breakpoint)
+[![License](https://badgen.net/npm/license/match-breakpoint?color=black&cache=240)](https://github.com/oleg-putseiko/match-breakpoint/blob/main/LICENSE.md)
+
+</div>
+
+A library of optimized React components and hooks for matching screen widths.
+
+# Installation
+
+```bash
+yarn add match-breakpoint@latest
+
+// or
+
+npm install match-breakpoint@latest
+
+// or
+
+pnpm install match-breakpoint@latest
+```
+
+# Advantages
+
+❇️ ⚡️ The library's components and hooks use a finite and predefined number of media match listeners, which reduces the computational load.
+
+❇️ ✨ Using `Breakpoint` components allows you to avoid cumulative layout shift.
+
+❇️ 💫 Conditional content display is compatible with most CSS frameworks, preprocessors, etc. In particular, it's possible to use the Tailwind CSS class name preset out of the box.
+
+❇️ 🛡️ The library supports breakpoint typing used in all components and hooks from one place.
+
+# Getting started
+
+First of all, you need to add a breakpoints provider to your application:
+
+```tsx
+import { BreakpointsProvider } from 'match-breakpoint';
+
+const App: FC = () => (
+  <BreakpointsProvider breakpoints={/* … */}>
+    {/* … */}
+    {/* … */}
+  </BreakpointsProvider>
+);
+```
+
+Next you need to define the breakpoints that will be used in the application:
+
+```tsx
+const BREAKPOINTS = {
+  // …
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  // …
+};
+
+const App: FC = () => (
+  <BreakpointsProvider breakpoints={BREAKPOINTS}>
+    {/* … */}
+    {/* … */}
+  </BreakpointsProvider>
+);
+```
+
+You can also pass a value from some configuration as breakpoints, for example from the Tailwind CSS configuration:
+
+```tsx
+import tailwindConfig from '../../tailwind.config.ts';
+
+const DEFAULT_BREAKPOINTS = {
+  // …
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  // …
+};
+
+const breakpoints = tailwindConfig.theme?.screens ?? DEFAULT_BREAKPOINTS;
+
+const App: FC = () => (
+  <BreakpointsProvider breakpoints={breakpoints}>
+    {/* … */}
+    {/* … */}
+  </BreakpointsProvider>
+);
+```
+
+After that you can use the `Breakpoint` component, for example:
+
+```tsx
+import { Breakpoint } from 'match-breakpoint';
+
+const Content: FC = () => (
+  <>
+    <Breakpoint size="md">Desktop Device Content</Breakpoint>
+
+    <Breakpoint size="md" matchTo="max">
+      Mobile Device Content
+    </Breakpoint>
+  </>
+);
+```
+
+Or using the `useBreakpoint` hook:
+
+```tsx
+import { useBreakpoint } from 'match-breakpoint';
+
+const Content: FC = () => {
+  const isScreenMinMd = useBreakpoint('md');
+
+  if (isScreenMinMd) {
+    return 'Desktop Device Content';
+  }
+
+  return 'Mobile Device Content';
+};
+```
+
+# Components
+
+## BreakpointsProvider
+
+Defined breakpoint contexts.
+
+### Usage:
+
+Example:
+
+```tsx
+const BREAKPOINTS = {
+  md: 768, // Same as '768px'
+  lg: '1024px',
+  xl: {
+    min: '1280px',
+    minClassName: 'max-xl:hidden',
+  },
+  combined: {
+    max: '768px',
+    maxClassName: 'md:hidden',
+
+    min: '1280px',
+    minClassName: 'max-xl:hidden',
+  },
+};
+
+const App: FC = () => (
+  <BreakpointsProvider breakpoints={BREAKPOINTS}>
+    {/* … */}
+    {/* … */}
+  </BreakpointsProvider>
+);
+```
+
+### Properties:
+
+| Property             | Type                                                 | Default value                                       | Description                                                                                                                                |
+| -------------------- | ---------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| breakpoints          | `Record<string, string \| number \| BreakpointData>` | -                                                   | Defines the set of breakpoints used in the application.                                                                                    |
+| classNamePreset      | `'tailwind' \| undefined`                            | `undefined`                                         | Defines a preset of class names used to hide elements.                                                                                     |
+| mergeClassesFunction | `MergeClassesFunction \| undefined`                  | `(...classes) => classes.filter(Boolean).join(' ')` | Defines a function for merging classes when adding them to elements. For example, you can pass a function to prevent class name conflicts. |
+| children             | `ReactNode`                                          | -                                                   | Required child elements.                                                                                                                   |

package/dist/src/components/Breakpoint/Breakpoint.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithoutRef, type ElementType, type ReactNode } from 'react';
+import { type Breakpoints, type MatchTo, type ScreenSize } from '../../types/breakpoints';
+import { type ExtractRef } from '../../types/react';
+type BreakpointControlledProps<T extends ElementType> = {
+    as?: T;
+    size: ScreenSize;
+    breakpoints?: Breakpoints;
+    matchTo?: MatchTo;
+    isDefaultMatches?: boolean;
+    children: ReactNode;
+};
+type BreakpointComponentNativeProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, keyof BreakpointControlledProps<T>>;
+type BreakpointProps<T extends ElementType> = BreakpointComponentNativeProps<T> & BreakpointControlledProps<T>;
+export declare const Breakpoint: <T extends ElementType = import("react").ExoticComponent<{
+    children?: ReactNode;
+}>>(props: BreakpointProps<T>, ref: ExtractRef<BreakpointComponentNativeProps<T>>) => import("react/jsx-runtime").JSX.Element[] | null | undefined;
+export {};

package/dist/src/components/Breakpoint/Breakpoint.js

@@ -0,0 +1,103 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, forwardRef, Fragment } from "react";
+import { BreakpointChild } from "./BreakpointChild";
+import { useMatchBreakpoint } from "../BreakpointsProvider";
+const DEFAULT_COMPONENT = Fragment;
+const BreakpointRenderFunction = (props, ref)=>{
+    const { as = DEFAULT_COMPONENT, size, matchTo = 'min', isDefaultMatches = true, children } = props, componentProps = _object_without_properties(props, [
+        "as",
+        "size",
+        "matchTo",
+        "isDefaultMatches",
+        "children"
+    ]);
+    const shouldRenderChildren = useMatchBreakpoint(size, matchTo, isDefaultMatches);
+    if (!shouldRenderChildren) return null;
+    return Children.map(children, (child)=>/*#__PURE__*/ _jsx(BreakpointChild, _object_spread_props(_object_spread({}, componentProps), {
+            ref: ref,
+            as: as,
+            size: size,
+            matchTo: matchTo,
+            child: child
+        })));
+};
+export const Breakpoint = /*#__PURE__*/ forwardRef(BreakpointRenderFunction);

package/dist/src/components/Breakpoint/BreakpointChild.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentProps, type ElementType, type ReactNode } from 'react';
+import { type MatchTo, type ScreenSize } from '../../types/breakpoints';
+import { type ExtractRef } from '../../types/react';
+type ControlledProps<E extends ElementType> = {
+    as?: E;
+    size: ScreenSize;
+    matchTo: MatchTo;
+    child: ReactNode;
+};
+type ComponentNativeProps<E extends ElementType> = Omit<ComponentProps<E>, 'children' | keyof ControlledProps<E>>;
+type TailwindBreakpointProps<E extends ElementType> = ComponentNativeProps<E> & ControlledProps<E>;
+export declare const BreakpointChild: <T extends ElementType = import("react").ExoticComponent<{
+    children?: ReactNode;
+}>>(props: TailwindBreakpointProps<T>, ref: ExtractRef<ComponentNativeProps<T>>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/Breakpoint/BreakpointChild.js

@@ -0,0 +1,155 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, forwardRef, Fragment, isValidElement } from "react";
+import { getMaxScreenWidth, getMinScreenWidth } from "../../utils/screen-width";
+import { useBreakpointsContext } from "../BreakpointsProvider/BreakpointsProvider";
+const DEFAULT_COMPONENT = Fragment;
+const CLASS_NAME_PRESETS = {
+    tailwind: {
+        maxClassName: 'min-[var(--max-screen-width)]:hidden',
+        minClassName: 'max-[var(--min-screen-width)]:hidden'
+    }
+};
+const buildProps = (options)=>{
+    const { ref, initialProps, matchTo, breakpoint, classNamePreset, mergeClassesFunction } = options;
+    const classNamePresetData = classNamePreset !== undefined ? CLASS_NAME_PRESETS[classNamePreset] : null;
+    if (matchTo === 'max') {
+        var _breakpoint_data_maxClassName;
+        return _object_spread_props(_object_spread({}, initialProps), {
+            ref,
+            style: _object_spread_props(_object_spread({}, initialProps === null || initialProps === void 0 ? void 0 : initialProps.style), {
+                ['--max-screen-width']: getMaxScreenWidth(breakpoint.data)
+            }),
+            className: mergeClassesFunction(initialProps === null || initialProps === void 0 ? void 0 : initialProps.className, typeof breakpoint.data === 'object' ? (_breakpoint_data_maxClassName = breakpoint.data.maxClassName) !== null && _breakpoint_data_maxClassName !== void 0 ? _breakpoint_data_maxClassName : classNamePresetData === null || classNamePresetData === void 0 ? void 0 : classNamePresetData.maxClassName : classNamePresetData === null || classNamePresetData === void 0 ? void 0 : classNamePresetData.maxClassName)
+        });
+    }
+    var _breakpoint_data_minClassName;
+    return _object_spread_props(_object_spread({}, initialProps), {
+        ref,
+        style: _object_spread_props(_object_spread({}, initialProps === null || initialProps === void 0 ? void 0 : initialProps.style), {
+            ['--min-screen-width']: getMinScreenWidth(breakpoint.data)
+        }),
+        className: mergeClassesFunction(initialProps === null || initialProps === void 0 ? void 0 : initialProps.className, typeof breakpoint.data === 'object' ? (_breakpoint_data_minClassName = breakpoint.data.minClassName) !== null && _breakpoint_data_minClassName !== void 0 ? _breakpoint_data_minClassName : classNamePresetData === null || classNamePresetData === void 0 ? void 0 : classNamePresetData.minClassName : classNamePresetData === null || classNamePresetData === void 0 ? void 0 : classNamePresetData.minClassName)
+    });
+};
+const BreakpointChildRenderFunction = (props, ref)=>{
+    const { as: Component = DEFAULT_COMPONENT, size, matchTo, child } = props, componentProps = _object_without_properties(props, [
+        "as",
+        "size",
+        "matchTo",
+        "child"
+    ]);
+    const { breakpoints, classNamePreset, mergeClassesFunction } = useBreakpointsContext();
+    const breakpoint = breakpoints[size];
+    if (!breakpoint) {
+        throw new Error(`Breakpoint with screen size "${size}" is not defined`);
+    }
+    if (Component === Fragment && /*#__PURE__*/ isValidElement(child)) {
+        return /*#__PURE__*/ cloneElement(child, buildProps({
+            initialProps: child.props,
+            matchTo,
+            breakpoint,
+            classNamePreset,
+            mergeClassesFunction
+        }));
+    }
+    if (Component !== Fragment) {
+        return /*#__PURE__*/ _jsx(Component, _object_spread_props(_object_spread({}, buildProps({
+            initialProps: componentProps,
+            ref,
+            matchTo,
+            breakpoint,
+            classNamePreset,
+            mergeClassesFunction
+        })), {
+            children: child
+        }));
+    }
+    return /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({}, buildProps({
+        matchTo,
+        breakpoint,
+        classNamePreset,
+        mergeClassesFunction
+    })), {
+        children: child
+    }));
+};
+export const BreakpointChild = /*#__PURE__*/ forwardRef(BreakpointChildRenderFunction);

package/dist/src/components/Breakpoint/index.d.ts

@@ -0,0 +1 @@
+export * from '../../components/Breakpoint/Breakpoint';

package/dist/src/components/Breakpoint/index.js

@@ -0,0 +1 @@
+export * from "./Breakpoint";

package/dist/src/components/BreakpointsProvider/BreakpointProvider.d.ts

@@ -0,0 +1,16 @@
+import { type Context, type FC, type ReactNode } from 'react';
+import { type BreakpointData } from '../../types/breakpoints';
+type BreakpointContext = {
+    isMatches: boolean | null;
+};
+export type ContextualizedBreakpointData = {
+    data: BreakpointData;
+    context: Context<BreakpointContext>;
+};
+export declare const DEFAULT_BREAKPOINT_CONTEXT: BreakpointContext;
+type BreakpointProviderProps = {
+    breakpoint: ContextualizedBreakpointData;
+    children: ReactNode;
+};
+export declare const BreakpointProvider: FC<BreakpointProviderProps>;
+export {};

package/dist/src/components/BreakpointsProvider/BreakpointProvider.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { getMinScreenWidth } from "../../utils/screen-width";
+export const DEFAULT_BREAKPOINT_CONTEXT = {
+    isMatches: null
+};
+export const BreakpointProvider = (props)=>{
+    const { breakpoint, children } = props;
+    const { Provider } = breakpoint.context;
+    const [isMatches, setIsMatches] = useState(DEFAULT_BREAKPOINT_CONTEXT.isMatches);
+    const minScreenWidth = getMinScreenWidth(breakpoint.data);
+    useEffect(()=>{
+        const media = window.matchMedia(`(min-width: ${minScreenWidth})`);
+        setIsMatches(media.matches);
+        const handleMediaChange = (event)=>{
+            setIsMatches(event.matches);
+        };
+        media.addEventListener('change', handleMediaChange);
+        return ()=>{
+            media.removeEventListener('change', handleMediaChange);
+        };
+    }, [
+        minScreenWidth
+    ]);
+    const value = useMemo(()=>({
+            isMatches
+        }), [
+        isMatches
+    ]);
+    return /*#__PURE__*/ _jsx(Provider, {
+        value: value,
+        children: children
+    });
+};

package/dist/src/components/BreakpointsProvider/BreakpointsProvider.d.ts

@@ -0,0 +1,20 @@
+import { type FC, type ReactNode } from 'react';
+import { type Breakpoints, type MatchTo, type ScreenSize } from '../../types/breakpoints';
+import { type ClassNamePreset, type MergeClassesFunction } from '../../types/styles';
+import { type ContextualizedBreakpointData } from '../../components/BreakpointsProvider/BreakpointProvider';
+type ContextualizedBreakpoints = Record<ScreenSize, ContextualizedBreakpointData>;
+type BreakpointsContext = {
+    breakpoints: ContextualizedBreakpoints;
+    classNamePreset?: ClassNamePreset;
+    mergeClassesFunction: MergeClassesFunction;
+};
+type BreakpointsProviderProps = {
+    breakpoints: Breakpoints;
+    classNamePreset?: ClassNamePreset;
+    children: ReactNode;
+    mergeClassesFunction?: MergeClassesFunction;
+};
+export declare const useBreakpointsContext: () => BreakpointsContext;
+export declare const useMatchBreakpoint: (size: ScreenSize, matchTo?: MatchTo, defaultValue?: boolean) => boolean;
+export declare const MatchBreakpointProvider: FC<BreakpointsProviderProps>;
+export {};

package/dist/src/components/BreakpointsProvider/BreakpointsProvider.js

@@ -0,0 +1,95 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { BreakpointProvider, DEFAULT_BREAKPOINT_CONTEXT } from "./BreakpointProvider";
+const DEFAULT_BREAKPOINTS_CONTEXT = {
+    breakpoints: {},
+    mergeClassesFunction: (...classes)=>classes.filter(Boolean).join(' ')
+};
+const BreakpointsContextInstance = /*#__PURE__*/ createContext(DEFAULT_BREAKPOINTS_CONTEXT);
+export const useBreakpointsContext = ()=>useContext(BreakpointsContextInstance);
+export const useMatchBreakpoint = (size, matchTo = 'min', defaultValue = false)=>{
+    const { breakpoints } = useBreakpointsContext();
+    const breakpoint = breakpoints[size];
+    if (!breakpoint) {
+        throw new Error(`Breakpoint with screen size "${size}" is not defined`);
+    }
+    const { isMatches } = useContext(breakpoint.context);
+    if (isMatches === null) return defaultValue;
+    return matchTo === 'min' ? isMatches : !isMatches;
+};
+export const MatchBreakpointProvider = (props)=>{
+    const { breakpoints, classNamePreset, children, mergeClassesFunction = DEFAULT_BREAKPOINTS_CONTEXT.mergeClassesFunction } = props;
+    const value = useMemo(()=>({
+            breakpoints: Object.keys(breakpoints).reduce((acc, key)=>_object_spread_props(_object_spread({}, acc), {
+                    [key]: {
+                        data: breakpoints[key],
+                        context: /*#__PURE__*/ createContext(_object_spread({}, DEFAULT_BREAKPOINT_CONTEXT))
+                    }
+                }), {}),
+            classNamePreset,
+            mergeClassesFunction
+        }), [
+        breakpoints,
+        classNamePreset,
+        mergeClassesFunction
+    ]);
+    return /*#__PURE__*/ _jsx(BreakpointsContextInstance.Provider, {
+        value: value,
+        children: Object.keys(value.breakpoints).reduce((acc, size)=>/*#__PURE__*/ _jsx(BreakpointProvider, {
+                breakpoint: value.breakpoints[size],
+                children: acc
+            }), children)
+    });
+};

package/dist/src/components/BreakpointsProvider/index.d.ts

@@ -0,0 +1 @@
+export * from '../../components/BreakpointsProvider/BreakpointsProvider';

package/dist/src/components/BreakpointsProvider/index.js

@@ -0,0 +1 @@
+export * from "./BreakpointsProvider";

package/dist/src/utils/screen-width.d.ts

@@ -0,0 +1,3 @@
+import { type BreakpointData } from '../types/breakpoints';
+export declare const getMaxScreenWidth: (breakpointData: BreakpointData) => string;
+export declare const getMinScreenWidth: (breakpointData: BreakpointData) => string;

package/dist/src/utils/screen-width.js

@@ -0,0 +1,12 @@
+export const getMaxScreenWidth = (breakpointData)=>{
+    if (typeof breakpointData === 'string') return breakpointData;
+    if (typeof breakpointData === 'number') return `${breakpointData}px`;
+    if (typeof breakpointData.max === 'string') return breakpointData.max;
+    return `${breakpointData.max}px`;
+};
+export const getMinScreenWidth = (breakpointData)=>{
+    if (typeof breakpointData === 'string') return breakpointData;
+    if (typeof breakpointData === 'number') return `${breakpointData}px`;
+    if (typeof breakpointData.min === 'string') return breakpointData.min;
+    return `${breakpointData.min}px`;
+};

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "match-breakpoint",
+  "version": "1.0.0-canary.0",
+  "description": "",
+  "license": "MIT",
+  "author": "Oleg Putseiko <oleg.putseiko@gmail.com> (https://github.com/oleg-putseiko)",
+  "keywords": [],
+  "homepage": "https://github.com/oleg-putseiko/match-breakpoint",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/oleg-putseiko/match-breakpoint"
+  },
+  "bugs": {
+    "url": "https://github.com/oleg-putseiko/match-breakpoint/issues"
+  },
+  "main": "dist/src/index.js",
+  "files": [
+    "dist/src/components/**/*",
+    "dist/src/utils/**/*",
+    "dist/src/index.js"
+  ],
+  "exports": "./dist/src/index.js",
+  "scripts": {
+    "build": "swc ./src/**/* -d dist && tsc --emitDeclarationOnly && tsc-alias",
+    "format": "prettier -c .",
+    "format:fix": "prettier -w .",
+    "lint": "eslint ./src/**/*.{js,ts,tsx,json}",
+    "lint:fix": "eslint ./src/**/*.{js,ts,tsx,json} --fix && yarn format:fix",
+    "lint:strict": "eslint ./src/**/*.{js,ts,tsx,json} --max-warnings=0 && yarn format",
+    "prepare": "husky install | chmod +x ./.husky/*",
+    "test": "jest",
+    "typecheck": "tsc --noEmit --incremental false"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^18.2.0",
+    "@commitlint/config-conventional": "^18.1.0",
+    "@swc/cli": "^0.5.1",
+    "@swc/core": "^1.9.3",
+    "@types/react": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-woofmeow": "^1.0.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-unused-imports": "^3.0.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.0.2",
+    "prettier": "^3.0.3",
+    "tsc-alias": "^1.8.10",
+    "typescript": "~5.2.2"
+  },
+  "engines": {
+    "node": "18.18.0",
+    "yarn": "3.6.4"
+  },
+  "volta": {
+    "node": "18.18.0",
+    "yarn": "3.6.4"
+  },
+  "packageManager": "yarn@3.6.4"
+}