Access to specific prop of theme and runtime as a state variable

[SMBCheeky]

First, it is a very nice library; I've been enjoying using it, and we have transitioned from styled-components to it as it allows us to maintain so much of our current way of working. Keep it up ;)

While I appreciate keeping the functionality of using theme and runtime as states inside a component, the withUnistyles in v3 is somewhat limited. I used to use the theme object returned by useStyles in key places, but now I must mostly remove it as working with the new API is not the easiest to read/understand at a glance.

I often need to update third-party library styles, as they do not expose them as extendable style objects or provide processed props with a specific "mini-theme" setup for each object. I usually patch them and go about my day :)

From what I read about the library and its internal workings, it should be easy to hook into a change in the app's current theme and runtime object and expose it in a hook.

const value = useRuntimeState('screen') // it would allow us to have a value like useWindowDimensions

const colors = useThemeState('colors') // it would allow us to make some changes and choose our way of conditionally rendering something if the color is X ... I know there is a component for that ... but it doesn't match to any rules i'm trying to enforce with my team :) no offense

I don't think anyone needs more than that (only first keys matter) and typescript should know all types from it

One common problem with withUnistyles() that I have is I usually create extendable components where style is more often than not a [style-main, style-prop], and I have to jump through hoops to get the current theme values. In some cases, I've just imported it from where it is defined directly and went on with my day :)

Another case is that I am building a highly complex app where I cannot use the phone's theme for light/dark, and I need to always programmatically change it or check it. A hook like the one above would be phenomenal and, in my workflow, it would reduce so many architectural decisions like why pass in a style, do I use props, how much can I let the user edit this, etc :)

What do you think?

[jpudysz]

Hey and thanks!

const colors = useThemeState('colors') // it would allow us to make some changes and choose our way of conditionally rendering something if the color is X ... I know there is a component for that ... but it doesn't match to any rules i'm trying to enforce with my team :) no offense

But it's already supported / released in beta.5!

https://www.unistyl.es/v3/references/use-unistyles

Did you see it?

[jpudysz]

You can now even use beta.6

[SMBCheeky]

Maybe I did not use the latest nitro-modules version, it seems odd, but I'll take it. Thanks for the help :)

Now, what do you think about my request for a more granular way of receiving updates for just one key in theme/runtime?

[SMBCheeky]

I'm also thinking of performance, and this feature would allow me to ok the code used by my team, as I would know it can't rerender unnecessarily, just when the specific field, like current theme name or color, changes.

I realise it might end up in a diff hell and it could be hard to debug, but if you already have the logic and it's just about exposing it, i said to ask :)

[jpudysz]

I already answered it few messsges above 😅

[SMBCheeky]

ah, damn, focused on other things. I saw it now.

Yeah, I'll probably still wrap it 2-3-4 times to get the desired outcome :) Thank you for re-adding it ;)