Gathering detailed insights and metrics for use-breakpoint
Gathering detailed insights and metrics for use-breakpoint
A React hook for getting the current responsive media breakpoint
Installations
npm install use-breakpointDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
22.13.1
NPM Version
10.9.2
Score
92.4
Supply Chain
86.9
Quality
79.2
Maintenance
100
Vulnerability
100
License
Releases
12
Languages
3
TypeScript
JavaScript
Shell
TypeScript (86.83%)
JavaScript (11.66%)
Shell (1.51%)
Developer
iiroj
Download Statistics
Total Downloads
3,295,387
Last Day
584
Last Week
28,712
Last Month
119,944
Last Year
1,323,198
GitHub Statistics
MIT License
86 Stars
207 Commits
7 Forks
2 Watchers
1 Branches
3 Contributors
Updated on Jun 01, 2025
Bundle Size
1.58 kB
Minified
782.00 B
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
4.0.6
Package Id
use-breakpoint@4.0.6
Unpacked Size
26.30 kB
Size
5.69 kB
File Count
23
NPM Version
10.9.2
Node Version
22.13.1
Published on
Feb 02, 2025
Total Downloads
Cumulative downloads
Total Downloads
3,295,387
Last Day
-12.7%
584
Compared to previous day
Last Week
0.9%
28,712
Compared to previous week
Last Month
11.6%
119,944
Compared to previous month
Last Year
76.4%
1,323,198
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
32
@commitlint/config-conventional@eslint/js@semantic-release/changelog@semantic-release/commit-analyzer@semantic-release/git@semantic-release/github@semantic-release/npm@semantic-release/release-notes-generator@storybook/react-vite@swc/jest@testing-library/react@types/jest@types/react@types/react-domcommitlintconventional-changelog-conventionalcommitseslinteslint-config-prettiereslint-plugin-jesteslint-plugin-prettierglobalshuskyjestjest-environment-jsdomjest-matchmedia-mocklint-stagedprettierreactreact-domstorybooktypescripttypescript-eslint
use-breakpoint
A React hook (>=18) for getting the current responsive media breakpoint.
useBreakpoint
Initialize useBreakpoint with a configuration object, and optionally a default breakpoint name (in non-window environments like SSR). The return value will be an object with the breakpoint's name (string), min-width, and max-width values (number):
1import useBreakpoint from 'use-breakpoint' 2 3/** 4 * It is important to bind the object of breakpoints to a variable for memoization to work correctly. 5 * If they are created dynamically, try using the `useMemo` hook. 6 */ 7const BREAKPOINTS = { mobile: 0, tablet: 768, desktop: 1280 } 8 9const CurrentBreakpoint = () => { 10 const { breakpoint, maxWidth, minWidth } = useBreakpoint( 11 BREAKPOINTS, 12 'desktop', 13 ) 14 return <p>The current breakpoint is {breakpoint}!</p> 15}
Return values
Given a configuration BREAKPOINTS = { mobile: 0, tablet: 768, desktop: 1280 } and a window size of 1280x960, the hook will return as the breakpoint:
const { breakpoint } = useBreakpoint(BREAKPOINTS)undefinedwhen rendered server-side'desktop'when rendered client-side
const { breakpoint } = useBreakpoint(BREAKPOINTS, 'mobile')'mobile'when rendered server-side'mobile'on the first client-side render'desktop'on subsequent client-side renders
Hydration
If supplied a default breakpoint, the hook will always return that value when rendered server-side. To not cause inconsistencies during the first client-side render, the default value is also used client-side for the first render, instead of the (possibly different) real breakpoint.
For example, given a breakpoint config:
1const { breakpoint } = useBreakpoint(BREAKPOINTS, 'mobile')
When rendered server-side, breakpoint === 'mobile' always, because there is no window. On client-side with a desktop-sized window, on the first render breakpoint === 'mobile', and then on following renders breakpoint === 'desktop'. This is to ensure ReactDOM.hydrate behaves correctly. The implementation relies on the useSyncExternalStore React hook with the getServerSnapshot callback.
Functionality
This hook uses the window.matchMedia functionality to calculate the current breakpoint. For a list of breakpoints, we generate some css media queries in the form of (min-width: XXXpx) and (max-width: YYYpx) and then add listeners for the changes. useBreakpoint will then update its return value when the breakpoint changes from one rule to another.
getCSSMediaQueries
To use the same breakpoint configuration in CSS-in-JS, you can use the getCSSMediaQueries helper:
1import { getCSSMediaQueries } from 'use-breakpoint' 2 3const BREAKPOINTS = { mobile: -1, tablet: 768, desktop: 1280 } 4 5const cssQueries = getCSSMediaQueries(BREAKPOINTS, 'screen') 6// { 7// desktop: "@media only screen and (min-width: 1280px)", 8// mobile: "@media only screen and (max-width: 767px)", 9// tablet: "@media only screen and (min-width: 768px) and (max-width: 1279px)", 10// }
The second option can be omitted to leave out the media type condition.
Developing
This project is built with Typescript. A Storybook is included for local previewing. The easiest way to get started is cloning the repo and starting the storybook server locally via npm start.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
packaging workflow detected
Details
- Info: Project packages its releases by way of GitHub Actions.: .github/workflows/push.yml:27
Reason
Found 2/23 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/release.yml:24
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/release.yml:47
- Warn: no topLevel permission defined: .github/workflows/_shared-build.yml:1
- Warn: no topLevel permission defined: .github/workflows/_shared-install.yml:1
- Warn: no topLevel permission defined: .github/workflows/_shared-lint.yml:1
- Warn: no topLevel permission defined: .github/workflows/_shared-test.yml:1
- Warn: no topLevel permission defined: .github/workflows/_shared-typecheck.yml:1
- Warn: no topLevel permission defined: .github/workflows/pull-requests.yml:1
- Warn: no topLevel permission defined: .github/workflows/push.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-build.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-build.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-build.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-build.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-build.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-build.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-build.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-build.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-install.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-install.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-install.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-install.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-install.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-install.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-lint.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-lint.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-lint.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-lint.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-lint.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-lint.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-test.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-test.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-test.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-typecheck.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-typecheck.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-typecheck.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-typecheck.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_shared-typecheck.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/_shared-typecheck.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/push.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/push.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/push.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/iiroj/use-breakpoint/release.yml/main?enable=pin
- Info: 0 out of 23 GitHub-owned GitHubAction dependencies pinned
- Info: 1 out of 1 npmCommand dependencies pinned
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 12 are checked with a SAST tool
Reason
12 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-x4c5-c7rf-jjgv
- Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
- Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
- Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
- Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
- Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
Score
2.9
/10
Last Scanned on 2025-06-23
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More