useBreakpoint value names are hard to comprehend

[joelhooks]

These are confusing when in encountered in JSX and we should consider using verbose longform variable names that fully describe what it is/does.

https://github.com/eggheadio/egghead-next/blob/9536ccb34ba3a080f6c703c7fc9f440587b9499b/src/utils/breakpoints.ts#L13-L21

This longer form we are exporting are much easier to comprehend, so something similar for this purpose would be very appreciated.

The names should express what the value does.

Additionally this utility is prefixed with use and is not a React Hook. use* should only be applied to React Hooks.

For "custom hooks" this typically means the custom hook will call one of the built-in hooks like React.useState or React.useEffect and not simply provide a return value in the style of a React hook.

This utility could use some documentation as well.

Discussion welcome!

[vojtaholik]

breakpoints	descriptive names	alt	device names
375	bpMinXS	isSizeMinXS	mobileSmall
640	bpMinSM	isSizeMinSM	mobile
768	bpMinMD	isSizeMinMD	tablet
1024	bpMinLG	isSizeMinLG	laptop
1280	bpMinXL	isSizeMinXL	desktop
1440	bpMinXL2	isSizeMinXL2	desktopLarge
1920	bpMinXL3	isSizeMinXL3	desktopWide

I think I like bpMinSM (or some form of it) approach the most — it’s descriptive thanks to the bp keyword, extendable with max-width breakpoints (if we ever need them), while still resembling Tailwind's responsive classes.

Device names would need a separate function exported for max-width breakpoints. Tailwind does support custom breakpoint names which allows for consistency across the board.

I also find idea of ergonomic breakpoint variables interesting.

[joelhooks]

i wouldn’t recommend (or even consider) patching tailwind to use a different system, and i understand “md” etc were probably trying to match tailwind, but it’s two different contexts IMO

[joelhooks]

i really like the “ergonomic” names!

…

--- original message --- On January 11, 2021, 09:43 PST [email protected] wrote: --- end of original message ---

[ltclmbdev]

Related PR: #307
What about “ergonomic” names - I think that keep bpMinXX will allow us to stay consistent (keeping in mind we use tailwindcss with its xx:-like breakpoint classnames).
What do you think?

[ltclmbdev]

i wouldn’t recommend (or even consider) patching tailwind to use a different system, and i understand “md” etc were probably trying to match tailwind, but it’s two different contexts IMO

We are talking about the same context imo, because we use these "js-defined" (formerly md, named as isMinMD in my PR) breakpoints to render or not certain components depending on viewport sizes (as we usually do with CSS) in situations when just hide/show with CSS is not appropriate. So keeping names of these js-breakpoints similar to tailwindcss naming seems good idea to me.

[ltclmbdev]

Demo of how this approach works: https://share.getcloudapp.com/NQuKyD0r

usage:

breakpoints	js-breakpoint	tailwindcss class prefix
0 - 375	!isMinXS	-
375 and above	isMinXS	xs:
640 and above	isMinSM	sm:
768 and above	isMinMD	md:
1024 and above	isMinLG	lg:
1280 and above	isMinXL	xl:
1440 and above	isMin2Xl	2xl:
1920 and above	isMin3XL	3xl: