cristianbote / goober

🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API
https://goober.rocks
MIT License
3.12k stars 118 forks source link

Theme component with a provider and a dynamic value #493

Open jjjtoikka opened 1 year ago

jjjtoikka commented 1 year ago

Hello, and thanks for a great library!

I'm trying to make a theme provider with export through react context. Problem is that the goober is using a default value in the context, so I can't update the context value after the new theme comes in. Is there any way to do that? Or am I missing something.

export const ThemeContext = createContext<ThemeType | undefined>(undefined);
export const useTheme = () => useContext(ThemeContext);

setup(React.createElement, undefined, useTheme, (props) => {
  for (const prop in props) {
    if (skipArr.includes(prop)) {
      delete props[prop];
    }
  }
});`

export const Theme = ({ children, theme }: Props) => {
  // update setup with new theme here
  return (
    <ThemeContext.Provider value={theme}>
jjjtoikka commented 1 year ago

Hmm, I can add a new component inside the <ThemeContext and do the setup in there. Seems to work like that