{"id":22656809,"url":"https://github.com/oleg-putseiko/match-breakpoint","last_synced_at":"2026-01-23T01:08:51.449Z","repository":{"id":265944592,"uuid":"893922642","full_name":"oleg-putseiko/match-breakpoint","owner":"oleg-putseiko","description":"A library of optimized React components and hooks for matching media queries","archived":false,"fork":false,"pushed_at":"2024-12-01T18:19:01.000Z","size":184,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-15T12:17:33.141Z","etag":null,"topics":["breakpoint","match-media","media-queries","performance","react","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oleg-putseiko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-25T12:51:28.000Z","updated_at":"2024-12-02T15:46:54.000Z","dependencies_parsed_at":"2024-12-01T17:58:19.229Z","dependency_job_id":"4016bbb3-740d-43f8-954b-a5310a2d2688","html_url":"https://github.com/oleg-putseiko/match-breakpoint","commit_stats":null,"previous_names":["oleg-putseiko/match-breakpoint"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/oleg-putseiko/match-breakpoint","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oleg-putseiko%2Fmatch-breakpoint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oleg-putseiko%2Fmatch-breakpoint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oleg-putseiko%2Fmatch-breakpoint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oleg-putseiko%2Fmatch-breakpoint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oleg-putseiko","download_url":"https://codeload.github.com/oleg-putseiko/match-breakpoint/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oleg-putseiko%2Fmatch-breakpoint/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261110612,"owners_count":23111064,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["breakpoint","match-media","media-queries","performance","react","tailwindcss","typescript"],"created_at":"2024-12-09T10:16:33.964Z","updated_at":"2026-01-23T01:08:51.440Z","avatar_url":"https://github.com/oleg-putseiko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# match-breakpoint\n\n[![Latest Release](https://badgen.net/github/release/oleg-putseiko/match-breakpoint?icon=github\u0026cache=240)](https://github.com/oleg-putseiko/match-breakpoint/releases)\n[![Total Downloads](https://badgen.net/npm/dt/match-breakpoint?icon=npm\u0026cache=240)](https://www.npmjs.com/package/match-breakpoint)\n[![Install Size](https://badgen.net/packagephobia/install/match-breakpoint?color=purple\u0026cache=240)](https://www.npmjs.com/package/match-breakpoint)\n[![License](https://badgen.net/npm/license/match-breakpoint?color=black\u0026cache=240)](https://github.com/oleg-putseiko/match-breakpoint/blob/main/LICENSE.md)\n\n\u003c/div\u003e\n\nA library of optimized React components and hooks for matching screen widths.\n\n# Installation\n\n```bash\nyarn add match-breakpoint\n\n// or\n\nnpm install match-breakpoint\n\n// or\n\npnpm install match-breakpoint\n```\n\n# Advantages\n\n❇️ ⚡️ The library's components and hooks use a finite and predefined number of media match listeners, which reduces the computational load.\n\n❇️ ✨ Using `Breakpoint` components allows you to avoid cumulative layout shift.\n\n❇️ 🧩 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.\n\n❇️ 🛡️ The library supports breakpoint typing used in all components and hooks from one place.\n\n# Getting started\n\nFirst of all, you need to add a breakpoints provider to your application:\n\n```tsx\nimport { BreakpointsProvider } from 'match-breakpoint';\n\nconst App: FC = () =\u003e (\n  \u003cBreakpointsProvider breakpoints={/* … */}\u003e\n    {/* … */}\n    {/* … */}\n  \u003c/BreakpointsProvider\u003e\n);\n```\n\nNext you need to define the breakpoints that will be used in the application:\n\n```tsx\nconst BREAKPOINTS = {\n  md: '768px',\n  lg: '1024px',\n  xl: '1280px',\n};\n\nconst App: FC = () =\u003e (\n  \u003cBreakpointsProvider breakpoints={BREAKPOINTS}\u003e\n    {/* … */}\n    {/* … */}\n  \u003c/BreakpointsProvider\u003e\n);\n```\n\nYou can also pass a value from some configuration as breakpoints, for example from the Tailwind CSS configuration:\n\n```tsx\nimport tailwindConfig from '../../tailwind.config.ts';\n\nconst DEFAULT_BREAKPOINTS = {\n  md: '768px',\n  lg: '1024px',\n  xl: '1280px',\n};\n\nconst breakpoints = tailwindConfig.theme?.screens ?? DEFAULT_BREAKPOINTS;\n\nconst App: FC = () =\u003e (\n  \u003cBreakpointsProvider breakpoints={breakpoints}\u003e\n    {/* … */}\n    {/* … */}\n  \u003c/BreakpointsProvider\u003e\n);\n```\n\nAfter that you can use the `Breakpoint` component, for example:\n\n```tsx\nimport { Breakpoint } from 'match-breakpoint';\n\nconst Page: FC = () =\u003e (\n  \u003c\u003e\n    \u003cBreakpoint size=\"md\"\u003eDesktop Device Content\u003c/Breakpoint\u003e\n\n    \u003cBreakpoint size=\"md\" matchTo=\"max\"\u003e\n      Mobile Device Content\n    \u003c/Breakpoint\u003e\n  \u003c/\u003e\n);\n```\n\nOr this using the `useBreakpoint` hook:\n\n```tsx\nimport { useBreakpoint } from 'match-breakpoint';\n\nconst Content: FC = () =\u003e {\n  const isDesktop = useBreakpoint('md');\n\n  return isDesktop ? 'Desktop Device Content' : 'Mobile Device Content';\n};\n```\n\n# Components\n\n## BreakpointsProvider\n\nDefines breakpoint contexts. Required for the library to function.\n\n### Usage:\n\nExample:\n\n```tsx\nconst BREAKPOINTS = {\n  sm: 640, // Same as '640px'\n  md: '768px',\n  lg: {\n    value: 1024, // same as '1024px'\n    minClassName: 'max-lg:hidden',\n    maxClassName: 'lg:hidden',\n  },\n  xl: {\n    value: '1280px',\n    minClassName: 'max-xl:hidden',\n    maxClassName: 'xl:hidden',\n  },\n};\n\nconst App: FC = () =\u003e (\n  \u003cBreakpointsProvider breakpoints={BREAKPOINTS}\u003e\n    {/* … */}\n    {/* … */}\n  \u003c/BreakpointsProvider\u003e\n);\n```\n\n### Properties:\n\n#### 1. breakpoints\n\nDefines the set of breakpoints used in the application. The property is required.\n\n**Type:** `Record\u003cstring, string | number | BreakpointData\u003e`\n\n**Default value:** —\n\n#### 2. cssPreset\n\nPreset of class names added to elements for conditional display. The property is optional.\n\n**Type:** `'tailwind' | undefined`\n\n**Default value:** `undefined`\n\n#### 3. mergeClassesFunction\n\nFunction for merging class names when displaying elements conditionally. The property is optional.\n\n**Type:** `MergeClassesFunction | undefined`\n\n**Default value:** `(...classes) =\u003e classes.filter(Boolean).join(' ')`\n\n#### 4. children\n\nChild elements. The property is required.\n\n**Type:** `ReactNode`\n\n**Default value:** —\n\n## Breakpoint\n\nRenders content based on the current screen size.\n\n### Usage:\n\nExample:\n\n```tsx\nconst Page: FC = () =\u003e (\n  \u003c\u003e\n    \u003cBreakpoint size=\"md\"\u003eDesktop Device Content\u003c/Breakpoint\u003e\n\n    \u003cBreakpoint size=\"md\" matchTo=\"max\"\u003e\n      Mobile Device Content\n    \u003c/Breakpoint\u003e\n  \u003c/\u003e\n);\n```\n\n### Properties:\n\n#### 1. size\n\nThe breakpoint size specified when setting the `breakpoints` property in the `BreakpointsProvider` component. The property is required.\n\n**Type:** `ScreenSize`\n\n**Default value:** —\n\n#### 2. matchTo\n\nSets which side of the breakpoint the match is made on. The property is optional.\n\n**Type:** `'min' | 'max' | undefined`\n\n**Default value:** `'min'`\n\n#### 3. isDefaultMatches\n\nDefault match value that determines the match until handlers are initialized. The property is optional.\n\n**Type:** `boolean | undefined`\n\n**Default value:** `true`\n\n#### 4. children\n\nChild elements. The property is required.\n\n**Type:** `ReactNode`\n\n**Default value:** —\n\n#### 5. as\n\nSpecifies which element the current `Breakpoint` should be rendered as. Once specified, props for a specified element can be passed. The property is optional.\n\n**Type:** `ElementType | undefined`\n\n**Default value:** `Fragment`\n\n# Hooks\n\n## useBreakpoint\n\nChecks whether the breakpoint matches the current screen size.\n\n### Usage:\n\nExample:\n\n```tsx\nimport { useBreakpoint } from 'match-breakpoint';\n\nconst Content: FC = () =\u003e {\n  const isDesktop = useBreakpoint('md');\n\n  return isDesktop ? 'Desktop Device Content' : 'Mobile Device Content';\n};\n```\n\n### Parameters\n\n#### 1. size\n\nThe breakpoint size specified when setting the `breakpoints` property in the `BreakpointsProvider` component. The parameter is required.\n\n**Type:** `ScreenSize`\n\n**Default value:** —\n\n#### 2. matchTo\n\nSets which side of the breakpoint the match is made on. The parameter is optional.\n\n**Type:** `'min' | 'max' | undefined`\n\n**Default value:** `'min'`\n\n#### 3. defaultValue\n\nDefault match value that determines the match until handlers are initialized. The parameter is optional.\n\n**Type:** `boolean | undefined`\n\n**Default value:** `true`\n\n# Typing through an application\n\nYou can typify breakpoint names and values by extending the `Breakpoints` interface:\n\n```tsx\ndeclare module 'match-breakpoint' {\n  interface Breakpoints {\n    sm: BreakpointData;\n    md: BreakpointData;\n  }\n}\n```\n\nThen, when using the `BreakpointProvider` and `Breakpoint` components and the `useBreakpoint` hook, this typing will be applied to their properties and parameters:\n\n```tsx\nconst Content: FC = () =\u003e {\n  const isDesktop = useBreakpoint('lg'); // ⛔️ TypeError: Type '\"lg\"' is not assignable to type '\"sm\" | \"md\"'\n\n  // ⛔️ TypeError: Type '\"lg\"' is not assignable to type '\"sm\" | \"md\"'\n  return \u003cBreakpoint size=\"lg\"\u003e{/* … */}\u003c/Breakpoint\u003e;\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foleg-putseiko%2Fmatch-breakpoint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foleg-putseiko%2Fmatch-breakpoint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foleg-putseiko%2Fmatch-breakpoint/lists"}