npmpackage.info

Gathering detailed insights and metrics for use-breakpoint

Other packages similar to use-breakpoint

@yamada-ui/use-breakpoint

1.4.20

Yamada UI useBreakpoint custom hook

use-breakpoint-value

1.0.6

`npm install --save use-breakpoint-value`

@kodingdotninja/use-tailwind-breakpoint

1.0.0

Custom hooks to use breakpoints for React 🎐🔨

react-use-breakpoint

1.2.1

Use breakpoints in JS when dealing with React based applications

Gathering detailed insights and metrics for use-breakpoint

use-breakpoint

A React hook for getting the current responsive media breakpoint

4.0.6

MIT

TypeScript

782.00 B

2,989,593 3.4

Installations

npm install use-breakpoint

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

22.13.1

NPM Version

10.9.2 Pull Requests

Open

0

Total

12

Closed

2

Merged

10

Issues

Open

0

Total

15

Closed

15

Releases

v4.0.6

Updated on Feb 02, 2025

v4.0.5

Updated on Nov 18, 2024

v4.0.4

Updated on Nov 18, 2024

v4.0.3

Updated on Nov 18, 2024

v4.0.2

Updated on Nov 13, 2024

v4.0.1

Updated on Oct 07, 2023

View All 12 releases

Contributors

Unable to fetch Contributors

View All 3 Contributors

Languages

TypeScript

JavaScript

Shell

TypeScript (86.83%)

JavaScript (11.66%)

Shell (1.51%)

validate.email 🚀

Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.

Developer

iiroj

Download Statistics

Total Downloads

2,989,593

Last Day

5,280

Last Week

27,777

Last Month

123,590

Last Year

1,265,551

GitHub Statistics

MIT License

82 Stars

207 Commits

7 Forks

2 Watchers

1 Branches

3 Contributors

Updated on Feb 02, 2025

Bundle Size

1.58 kB

Minified

782.00 B

Minified + Gzipped

Bundlephobia

Maintainers

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

NPM Version

10.9.2

Node Version

22.13.1

Published on

Feb 02, 2025

Total Downloads

Cumulative downloads

Total Downloads

2,989,593

Last Day

12.5%

5,280

Compared to previous day

Last Week

7.9%

27,777

Compared to previous week

Last Month

10.9%

123,590

Compared to previous month

Last Year

93.9%

1,265,551

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

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)
- undefined when 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.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

4

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

1

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

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

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3.4

/10

Last Scanned on 2025-03-10

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

Other packages similar to use-breakpoint

Other packages similar to use-breakpoint

use-breakpoint

Installations

Developer Guide

Yes

CommonJS, ESM

22.13.1

10.9.2

Pull Requests

0

12

2

10

Issues

0

15

15

Releases

Contributors

Unable to fetch Contributors

Languages

validate.email 🚀

Developer

iiroj

Download Statistics

GitHub Statistics

Bundle Size

1.58 kB

782.00 B

Maintainers

Package Meta Information

Total Downloads

2,989,593

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

use-breakpoint

useBreakpoint

Return values

Hydration

Functionality

getCSSMediaQueries

Developing

10

10

10

10

4

1

0

0

0

0

0

0

0

0

3.4

/10

`useBreakpoint`

`getCSSMediaQueries`