[useMediaQuery] Improve example for use with breakpoints and SSR
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
useMediaQuery() is important hook, specially when one wants to pass props conditionally based on breakpoints, which is required lots of times while building responsive web app. But useMediaQuery() does not perform well with nextJS SSR, on client side one can see layout getting fixed after a second. I request material UI team to please give some solution or give us any other way to pass props conditionally based on screen current screen size.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the useMediaQuery documentation and its breakpoint usage in NextJS SSR. Reproduce the client-side layout shift described in the issue, then improve the example or guidance so the supported conditional-props approach and its completed SSR behavior are clear.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, react
- Domain
- documentation, frontend
- Issue type
- Documentation
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100