CODEWITHSUNDEEP
reactjsreact-contextstorybookbit.dev
bluePhlavio
bluePhlavio

Reputation: 547

Global context for bit-tracked React component

I'm developing a React component library for a web site. For local development I use Storybook. I think bit can be a good tool (better than npm link) for exporting library components and import them into the web site repo. Now the problem is that I'm using global context for some components but bit components must be isolated and self-sufficient. I don't want to wrap all my tiny components that use global context only to render them on bit.dev!

I have been able to resolve the same problem with storybook using decorators. So, I define a component without wrapping it with a ContextProvider and then in the stories file I use a decorator that wraps my component with the ContextProvider.

Is there a way to wrap bit components with global context provider without wrapping the actual component that will be used in production web site where a single global context provider wrap the entire app? What about best practices about this kind of workflow?

Upvotes: 1

Views: 390

Answers (1)

Josh
Josh

Reputation: 668

Using global context when implementing reusable components is not recommended.
Not only when using Bit, but when another project consumes a component it needs to have the same exact context for the component to work. Making the component less reusable and attractive to consumers.
The fact that this is not comfortable for rendering examples on the playground in bit.dev is a side-effect for it.
What you can do is either decouple the state from the component and use the params to get state and actions directly, via APIs. Or you can encapsulate the state inside the component. You can read more about it in Bit's best practices for building reusable components - https://docs.bit.dev/docs/best-practices#state-managers
and also here - https://github.com/Tallyb/reusable-components-styleguide#globals

Upvotes: 2

Related Questions