mobily
commented
2 years ago 👋 @markmctamney, the new version (v1.4.1) of Stacks supports custom breakpoints 🎉 you can add them by updating the breakpoints property in the provider, it accepts an array of tuples, the first value is a breakpoint name, and the other is a minimum breakpoint width.
<StacksProvider breakpoints={[
['mobile', 480],
['tablet', 768],
['desktop', 992],
['large-desktop', 1200],
['extra-large-desktop', 1440]
]}>
…
</StacksProvider>you can read more in the docs: https://mobily.github.io/stacks/docs/breakpoints https://mobily.github.io/stacks/docs/hooks/use-current-breakpoint/
let me know if this solves your problem 😊
Thanks for an awesome easy-to-use package!
Any chance it would be a quick non-breaking change to allow for more breakpoints, in addition to just customizing the existing? I'm working on a universal app that runs the gamut from small devices to large screens, so the one issue I've found myself running into recently is having a few more options along the way instead of just relying on flex/percentages, etc.
In a couple quick searches, it looks like other design systems like Microsoft's Fluent UI also allow for 6 or more. Interestingly, Braid also seems to indicate they wish they had avoided tying theirs so closely to hard-coded names in a comment, as opposed to treating it a bit more like a variable-length, ordered array, which is I guess more my preference too (but by all means keep the human-readable custom aliases too).
Looks like the current number is hard-coded to 3 currently, and it's not possible to override that, even with a typed object to replace it, so I get capped out there. I would think this shouldn't add too much logic, since presumably you could just kind of map up through the values until there are no more left (and just take the highest value) if you're out of values and haven't run out of screen yet, which I think is what you do now). Anyway maybe I'm missing something, but those were my 2 cents anyway.
I'll try to play with a hack/patch if I can despite my limited exposure to ReScript and happy to share whatever I come up with if I do as well if of interest.