useBreakpoint is not using the breakpoints defined in theme

[vivekjain202]

Hi @mg901 thanks for this awesome library.

I'm using this library in one of my project and wanted to use breakpoint with useBreakpoint so that i can render my components conditionality based on the screen size. But even when i defined theme with createTheme it seems to take value from default breakpoints.

CodeSandbox Link:- https://codesandbox.io/s/hooks-api-emotion-forked-3glb0s

After going through the code i understood that in this case theme is not getting attached to function automatically as it would in case of rendering it as styled/react component.

Solution i am thinking of :-

• Exposing createUseBreakpoint through which we can define the theme object to be used in case, and instead of default theme it will use the theme we are passing here.

Let me know your thoughts ?

[zaragit]

Hi @vivekjain202

Although this issue may have been resolved by now, it looks like the problem is due to using the useBreakpoint function before wrapping it with the Provider.

If you implement it like in https://codesandbox.io/s/hooks-api-emotion-forked-w5dbjb?file=/src/app.tsx, it should work properly.

By the way, I agree that it would be great if a function like createUseBreakpoint were exposed. 😃
I'm curious if there has been any progress or plans for changes regarding this issue. @mg901

[mg901]

@vivekjain202, hi! Thank you for your question and interest for Styled Breakpoints. Unfortunately, At the moment I don't have enough time to give full answers. Due to the fact that Russia attacked Ukraine. I, as a citizen of Russia who does not support this barbarity, decided to leave my home. Now all my time is spent on learning more English and solving algorithmic problems. I urgently need to find a country where I can feel safe and think about the future.

If answer your question.

I rewrote his and it is at the link.

[mg901]

@vivekjain202 What problem do you think the function createUseBreakpoint will solve? Can you show me examples?