SolidJS•3w 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

slainless•3w ago

use theme signal impl:

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

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

Brendonovich•3w ago

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

slainless•3w ago

wait...

Brendonovich•3w ago

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

slainless•3w ago

ah is that so

Brendonovich•3w ago

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

slainless•3w 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•3w 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

slainless•3w ago

aha many thanks for your help man 🙏

Gaming

Programming

Help with context and storybook