Hooks + Context not working within Tailwind component
#1104
Comments
|
Certainly something we have in mind and that we intend in fixing ASAP. |
|
@gabrielmfern Do you happen to know if this is now fixed given that #1383 is merged? |
|
@WillsB3 Not yet fixed, but this is still going to be an issue that only happens when you have a context inside - as in a child of - the Tailwind component. So, a possible workaround is moving your context provider above Tailwind. The fix for this is not going to be too hard, I just need to find the time to do it. Will let you know once I do. |
|
Appreciate you sharing the workaround, will give it a go. Thank you 🙏 |
|
Would still love for this to be fixed, but we’ve worked around it for singleton providers by creating a provider/hook that executes synchronously. Here’s an example for import { ReactNode } from "react"
import { IntlShape } from "react-intl"
import { Language, getLocaleData } from "."
type IntlContext = { intl: IntlShape; lang: Language }
const ref: {
intl?: IntlShape
lang?: Language
} = {
intl: undefined,
lang: undefined,
}
export const WithIntl = ({
children,
locale,
}: {
children: ((args: IntlContext) => ReactNode) | ReactNode
locale?: string
}) => {
const { intl, lang } = getLocaleData(locale)
ref.intl = intl
ref.lang = lang
if (typeof children === "function") {
return children({ intl, lang })
}
return <>{children}</>
}
export const useIntl = () => {
if (ref.intl !== undefined && ref.lang !== undefined) {
return ref as IntlContext
}
throw new Error("useIntl called without <WithIntl> provider.")
} |
|
Update on this: the issue is a bit harder to fix than I initially thought, there is no simple way to fix it. This is definitely a problem that is going to be here for some time before we can do the big changes for it. The only solutions I can think of require some breaking changes, both in rendering, and in how Tailwind is going to be used with React Email The issue is that, since we don't and probably won't have a renderer of our own, we have to literally map the entire tree of elements that are children of the Tailwind component to actually inline the styles, but for this to work properly, we also resolve all components that are found, and that breaks the usual lifecycle for React sadly. |
The new Tailwind component makes it quite impossible to use hooks or context w/ react email.
As I'm using react-i18next for i18n, I'm using the
useTranslationhook. So I'm not having a dynamic use case either, just using available tools.Also, I'm using context to pass around some shared data without using prop drilling.
My workaround till now was having
Tailwindas my root, so it won't interfere w/ context etc.However, this won't work with the rewrite, as it's now required to have the
<head>as a direct descendant of<Tailwind>.The hooks issue was also mentioned in #1021, and also what's the probable cause:
The text was updated successfully, but these errors were encountered: