Centralised Breakpoints using useIsMobile hook

[Keshav-0907]

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:

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

[lindapaiste]

@raclim I didn't run the branch but the code is good ✔️

[lindapaiste]

So much cleaner!

[lindapaiste]

FYI as things evolve I'm hoping that we can eventually use the useIsMobile hook directly in the child components instead of passing down the prop. Def good for now though!

[lindapaiste]

Looking at these lines you can see why this PR is so important! The other components with MediaQuery are using minWidth={770}. I wrote the code on the left and used maxWidth: 770. But it should have been maxWidth: 669 so that it looks right when the screen is exactly 770px wide.

[release-com]

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/

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

• p5.js-web-editor

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

[raclim]

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!