SolidJS•7mo ago

Help with context and storybook

Any advice/guess why the consumer is not receiving the value i set on provider and instead got the default value? It definitely works in dev... Thanks.

9 Replies

slainlessOP•7mo ago

use theme signal impl:

export function useThemeSignal() {
  return useContext(ThemeContext)
}

export function useThemeSignal() {
  return useContext(ThemeContext)
}

Brendonovich•7mo ago

This is a funny one, you're calling the Story() outside of the provider, so it doesn't have access

slainlessOP•7mo ago

wait...

Brendonovich•7mo ago

It might work to just pass Story without calling it since functions as children is valid

slainlessOP•7mo ago

ah is that so

Brendonovich•7mo ago

You'd be better off just using JSX though if possible

slainlessOP•7mo ago

well, i tried with jsx though but still not getting the value eh nvm forgot to pass the value, haha so dumb wait, so what is the equivalent of

        <ThemeContext.Provider value={themeSignal}>
          <Story />
        </ThemeContext.Provider>

        <ThemeContext.Provider value={themeSignal}>
          <Story />
        </ThemeContext.Provider>

in non JSX?

Brendonovich•7mo ago

Something like

ThemeContext.Provider({
  children: Story,
  value: themeSignal
})

ThemeContext.Provider({
  children: Story,
  value: themeSignal
})

ThemeContext.Provider({
  get children() {
    return Story()
  },
  value: themeSignal
})

ThemeContext.Provider({
  get children() {
    return Story()
  },
  value: themeSignal
})

with some extra memoisation on children that jsx automatically inserts

slainlessOP•7mo ago

aha many thanks for your help man 🙏

Gaming

Programming

Help with context and storybook