codeskills-dev / responsive-email

a utility for writing responsive email templates for jsx-email and react-email
https://www.npmjs.com/search?q=%40responsive-email
28 stars 3 forks source link

refactor: Composability for API and support for different both `react-email` and `jsx-email` #3

Closed gabrielmfern closed 6 months ago

gabrielmfern commented 7 months ago

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:

<ResponsiveRow>
  <ResponsiveColumn style={{ backgroundColor: 'green' }} span={2} />
  <ResponsiveColumn style={{ backgroundColor: 'red' }} span={1} />
</ResponsiveRow>

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!