Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Export pixel values with `breakpoints` object

See original GitHub issue

Summary

The breakpoints export from the @carbon/layout package exports breakpoint values as rems. For use in JavaScript it would be nice to be able to reference the pixel value as well.

Justification

I’ve encountered a couple of cases where I’d like to set application state in my React app based the current screen size. It would be nice to have those static breakpoint pixel values available from Carbon instead of hard-coding them or converting the rem values back to pixels.

Desired UX and success metrics

Breakpoints pixel values are available in the breakpoints object alongside the rem values.

“Must have” functionality

See above

Specific timeline issues / requests

n/a

Available extra resources

I could put up a PR if desired.

Issue Analytics

State:
Created 4 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

1reaction

joshblackcommented, Aug 30, 2019

Hi @showell215! 👋 The exports provided from @carbon/layout’s JS should be treated as unstable, most likely, and they’ll 100% change to allow for more flexible unit representations like you’re requesting.

In the meantime, converting from rem to pixel would be preferred and we’ll 100% track this use-case when expanding the functionality 😄

0reactions

stale[bot]commented, Oct 2, 2019

As there’s been no activity since this issue was marked as stale, we are auto-closing it.

Top Results From Across the Web

Using Material-UI breakpoints with pixel values instead of sm ...

It doesn't actually break on those points. I'm wondering how to use actual numbers in the breakpoint section in a way that mui...

use-breakpoint/createMediaQueries.ts at master · iiroj/use ... - GitHub

A React hook for getting the current responsive media breakpoint ... @param breakpoints the list of configured breakpoint names and their pixel values....

Approaches to Media Queries in Sass - CSS-Tricks

A first step would be to store that breakpoint in a variable and use it ... as a bonus, it's really clever with...

Breakpoints | Webflow University

A breakpoint is the screen width at which your layout will change to fit the new viewport.

How To Detect Breakpoints Using the Angular CDK

Learn how to detect viewport size changes or matches against media queries using the BreakpointObserver and MediaMatcher services from the ...