Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use breakpoint support array #63

Open
Ayc0 opened this issue Jun 26, 2023 · 1 comment
Open

Use breakpoint support array #63

Ayc0 opened this issue Jun 26, 2023 · 1 comment

Comments

@Ayc0
Copy link
Collaborator

Ayc0 commented Jun 26, 2023

At the moment, we can do useBreakpoint('md lg'). Instead we should support useBreakpoint(['md', 'lg'])
It would be a bit more performant as we wouldn't have to do the split every time

The issue with using an array is that it'd bust the react cache at each re-render when used in an inline way

const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);

@Ayc0
Copy link
Collaborator Author

Ayc0 commented Dec 9, 2024

Using arrays instead of strings has 2 main drawbacks though:

  1. less easy to manipulate with react cache (dependency array in useMemo),
  2. it doesn't add that much values ("It would be a bit more performant" this would be false as we do a lot of transformations & validations afterwards anyway)

But we could use this to add stronger types, like Breakpoints | Breakpoints[]. But as all breakpoints are customizable (even the default ones are overridable), we can't just provide a fixed list of breakpoints.

Maybe something like this would be enough?

useBreakpoint<const B extends string | string[] = Breakpoints | Breakpoints[]>(breakpoint: B) {  }
// Same for only

But there would be no guarantee that it'll match those custom breakpoints (except by manually setting those. Maybe that's enough?)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant