3

I'm starting a new UI-library with bit.dev

However I can't find any information or docs on how to add a "global" Provider to these compoonents?

I have several apps I want to use this UI-library with different theme colors.

I don't want to hardcode the colors into each component so I want all my components to be wrapped in a "global" ThemeProvider of some sort to supply the colors.

How can you accomplish this with bit.dev?

Do I really wrap every single component with a ThemeProvider like this:

<ThemeProvider theme={theme}>
  <Button {args}>
    {args.children}
  </Button>
<ThemeProvider>

That seems a little strange, and I want each app to be able to supply it's own Theme (not hard-code one into the ui-components library)

I also don't want to have to supply a theme to every single component I import in my library.

Ideally they will just pick up my already existing ThemeProvider w/ emotion-css, or worst case I have to add another Provider that supplies the theme to all my bit.dev components?

Would really appreciate some help on how to do this with bit.dev? I feel like I'm missing something simple.

MLyck
  • 4,959
  • 13
  • 43
  • 74
  • I'm a little confused at what the issue is. Normally you'd wrap the App at the top-level with a theme provider, or some large container within the app that you want to be themed. Why do you believe you're forced to wrap each component individually? – suddjian Dec 07 '20 at 19:23
  • This isn't an application. It's a UI-component library, built with bit.dev I don't have a "top-level" to wrap anything with. – MLyck Dec 07 '20 at 19:41
  • If the component needs to use the theme, then it needs a `ThemeConsumer` or a `useTheme` hook, not a provider. It's usually up to the application to render a `ThemeProvider`. – suddjian Dec 07 '20 at 20:12
  • @suddjian yeah I got that part. But if I just give wrap it in a `withTheme` HoC, and try to use a theme variable, the component will (rightfully so) throw an error since it has no idea what e.g. `theme.colors.primary[400]` is. I still need my component to render as a "bit". Which means it needs to "somehow" be wrapped in a ThemeProvider, but I can't find any docs on how to do that for all UI-components specifically with https://bit.dev I use theming every day in "normal" applications. But this is my first time using bit.dev and my first UI library. – MLyck Dec 07 '20 at 22:24
  • I think I understand, so you want a default theme if the user of your library doesn't supply one? – suddjian Dec 07 '20 at 22:27
  • @suddjian yeah kind of. The main problem is that bit renders and publishes each component separately. So I'm unsure how to use a Theme at all with this ui-library tool. The problem is very specific to `bit.dev`. When I build the componennts in Storybook for example I can just have a storybook wrapper that supplies the theme. But I can't find an equilevant solution for bit.dev – MLyck Dec 07 '20 at 23:02
  • Would it make sense to write your own HOC that wraps the `withTheme` HOC and supplies the default theme if one isn't found? – suddjian Dec 08 '20 at 20:51

0 Answers0