Hey, love this project and the way you found to get the responsive columns
going. My only worry is about how it is not very composable here, and how
you need to switch components when you want more columns.
So I came up with the idea of an improved version and was wondering if you
might like it or not. The API now is something like:
This also allows specifying a certain colSpan for the columns which I think
is a pretty great added benefit.
If the user then wants to add in more columns, they can just use the <ResponsiveColumn>
component again and the <ResponsiveRow> component will just re-compute the amount
of columns it should have.
How this was implemented
The way I did this, without using any React context, was by parsing the children
of <ResponsiveRow> in a way that it checks to find a React element that has a
type which contains the function corresponding to the Function Component <ResponsiveColumn>.
This way, it can both access the props the user had in the component, and avoid
it being used somewhere else.
Besides this, I also made the project a monorepo, with a test React Email workspace
that imports in the component with the same email templates as the ones mentioned
in the README.
Hey, love this project and the way you found to get the responsive columns going. My only worry is about how it is not very composable here, and how you need to switch components when you want more columns.
So I came up with the idea of an improved version and was wondering if you might like it or not. The API now is something like:
This also allows specifying a certain
colSpan
for the columns which I think is a pretty great added benefit.If the user then wants to add in more columns, they can just use the
<ResponsiveColumn>
component again and the<ResponsiveRow>
component will just re-compute the amount of columns it should have.How this was implemented
The way I did this, without using any React context, was by parsing the children of
<ResponsiveRow>
in a way that it checks to find a React element that has a type which contains the function corresponding to the Function Component<ResponsiveColumn>
.This way, it can both access the props the user had in the component, and avoid it being used somewhere else.
Besides this, I also made the project a monorepo, with a
test
React Email workspace that imports in the component with the same email templates as the ones mentioned in the README.Thank you!