JS breakpoints

[velddev]

I'm migrating my project from ChakraUI to Panda CSS, but I'm running into a major issue where I no longer feel like I have a useBreakpointValue, what is the preferred migration method for this?

[astahmer]

you can use Panda conditions with breakpoints to achieve the same result with CSS only

[velddev]

Yea, I tried this, for some context I have a stepper component and a carousel that integrate with each other.

So my problem here is that I would need to show e.g. a specific number of steps based on the number of items in the carousel.

on mobile it could show 1, but on desktop 3. If there are 12 items, it would have 12 pages on mobile and 9 (or 4 if you scroll by threes) on desktop.

I can't really get a value back from the condition to then use in the js runtime. (maybe this is possible? I haven't found how to do it though.)

[astahmer]

you can access your DS tokens at runtime with JS using the token function
if you need something reactive you can use something like this use-breakpoint

[velddev]

👍 That's what I ended up doing, thanks for letting me know about the token function!