Closed sidag95 closed 1 year ago
Hey everyone, On digging further in this repo, I see that this is already implemented. I think this issue was not linked to the original PR which solved this problem. Anyway, here is the PR: https://github.com/razorpay/blade/pull/442 @sidag95 Please let me know if that is what you wanted as the outcome of this issue.
cc: @chaitanyadeorukhkar
Hey @kkyusufk yes, it seems like this should solve our use case. I will update to the latest blade version and verify this.
Side note: @chaitanyadeorukhkar Seems like we are now using StyledComponents by default. Will this have an impact on the bundle size and runtime performance of Blade and especially on projects that do not use Styled components?
Also, how about the projects that just want to utilize our tokens and not the components? Will all such projects be required to have styled-components as their dependency?
Hey @kkyusufk yes, it seems like this should solve our use case. I will update to the latest blade version and verify this.
Side note: @chaitanyadeorukhkar Seems like we are now using StyledComponents by default. Will this have an impact on the bundle size and runtime performance of Blade and especially on projects that do not use Styled components?
Also, how about the projects that just want to utilize our tokens and not the components? Will all such projects be required to have styled-components as their dependency?
Yes, we use StyledComponents
and we list it as peerDependency
to use Blade.
If any projects want to use tokens they can directly import from @razorpay/blade/tokens
without installing styled-components. But if you use our theme provider(which is what we recommend) then you get a lot of things out of the box for eg: color schemes: dark/light mode, auto handling of responsiveness when the screen size changes, etc., and for that projects do need to install styled-components.
talking about the bundlesize we haven't yet directly verified that, but assuming things are tree shakeable it won't bloat up bundlesize.
Closing as it seems to be working for the usecase link to comment
What is this issue about?
Blade provides a useTheme hook to consume the theme and use it in the Application at each component level. This gives a lot of flexibility to use the theme in a function component.
Example usage from the repo (some details removed for brevity)
Setup theme using BladeProvider
And then inside the Card component,
However, it is a little cumbersome for projects where large parts are using the same theme. Each core component will have to get the theme value from the useTheme hook and then pass it to individual components.
Alternate approach
Instead of the aforementioned example usage of theme, there is an alternate approach that we can take for projects using StyledComponents. We can supply the theme once to styled-components's built-in ThemeProvider. This will automatically make the theme object available to each component.
Example
Setup theme using BladeProvider
And then inside the Card component,
This approach has two advantages
This is possible with the current API provided by Blade, what is the issue?
While this approach can still be followed with the current API provided by Blade, it is cumbersome to get the Theme value as an additional component is required to get the theme. For example
Then, inside
MyThemeProvider
Proposed Solution
The proposed solution removes the aforementioned extra component in the usage. If we expose ThemeContext.Consumer from within useTheme.js, the aforementioned solution can be reduced to the following
Benefits
While there is not a significant functional benefit of adding this API, there are cosmetic benefits from the libraries' usage point of view.