Centralised Breakpoints using useIsMobile hook

processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.

https://editor.p5js.org

GNU Lesser General Public License v2.1

1.3k stars 1.26k forks source link

Centralised Breakpoints using useIsMobile hook #3042

Closed Keshav-0907 closed 3 months ago

Keshav-0907 commented 4 months ago

Fixes #3035

Changes:

Created a useIsMobile hook where the breakpoint is defined and it returns a boolean value, the hook is also able to handle if any custom breakpoint is provided.

import { useMediaQuery } from 'react-responsive';

const useIsMobile = (customBreakpoint) => {
  const breakPoint = customBreakpoint || 770;
  const isMobile = useMediaQuery({ maxWidth: breakPoint });
  return isMobile;
};

export default useIsMobile;

I have verified that this pull request:

[x] has no linting errors (npm run lint)
[x] has no test errors (npm run test)
[x] is from a uniquely-named feature branch and is up to date with the develop branch.
[x] is descriptively named and links to an issue number, i.e. Fixes #3035

release-com[bot] commented 3 months ago

Release Environments

This Environment is provided by Release, learn more! To see the status of the Environment click on Environment Status below.

p5.js-web-editor
- app-ted261d.release.editor.p5js.org/
- preview-ted261d.release.editor.p5js.org/

:wrench:Environment Status : https://app.release.com/public/Processing%20Foundation/env-4ba9e03d9a

p5.js-web-editor

:wrench:Environment Status : https://app.release.com/public/Processing%20Foundation/env-8f588d3ea4

raclim commented 3 months ago

I just ran the branch and it seems good to me so far! I also created a release environment for this to make accessing it from mobile a bit easier too (this should be the URL to go to on mobile: app-ted261d.release.editor.p5js.org/). Since I couldn't spot anything I'm going to merge this in, but let me know if there's anything else!