dooboolab-community/hackatalk

Use Material-UI-like Breakpoints for Media Queries

0916dhkim opened this issue · 4 comments

0916dhkim commented

Specify project
Client

Is your feature request related to a problem? Please describe.
Currently, minWidth of tablet and desktop is defined in client/src/utils/media.ts. Material UI project organizes these width values into "breakpoints" and put them in theme.breakpoints.

Describe the solution you'd like
Hackatalk can take the same approach and use media queries like the following:

const isTablet = useMediaQuery(theme.breakpoints.up('tablet'));

Additional context

hyochan commented

Are you saying you want to put values inside the theme variable as a breakpoints?

0916dhkim commented

@hyochan Here's Material UI's approach : Breakpoints - Material-UI
They provide helper functions that return media queries which can be used inside useMediaQuery.
For example, theme.breakpoints.up('sm') will return a media query that matches screen size sm and larger. The following is the list of their breakpoint helper functions:

  • theme.breakpoints.up
  • theme.breakpoints.down
  • theme.breakpoints.only
  • theme.breakpoints.between
stale commented

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

stale commented

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.