{"id":21055535,"url":"https://github.com/codeskills-dev/responsive-email","last_synced_at":"2025-04-07T11:04:14.889Z","repository":{"id":183342347,"uuid":"658280438","full_name":"codeskills-dev/responsive-email","owner":"codeskills-dev","description":"a utility for writing responsive email templates for jsx-email and react-email","archived":false,"fork":false,"pushed_at":"2025-01-10T02:06:58.000Z","size":1638,"stargazers_count":33,"open_issues_count":6,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-31T10:01:35.783Z","etag":null,"topics":["email-templates","jsx-email","react-email","responsive-email","responsive-email-templates"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/search?q=%40responsive-email","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codeskills-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-25T09:49:48.000Z","updated_at":"2025-03-19T09:05:52.000Z","dependencies_parsed_at":"2024-08-22T20:28:28.109Z","dependency_job_id":"d4d5d13b-f3d1-42ef-8e56-94850a2c3dca","html_url":"https://github.com/codeskills-dev/responsive-email","commit_stats":{"total_commits":58,"total_committers":3,"mean_commits":"19.333333333333332","dds":0.5,"last_synced_commit":"f23c6c13f17210a929ea7865504f3eaebca0c55b"},"previous_names":["codeskills-dev/responsive-react-email"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeskills-dev%2Fresponsive-email","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeskills-dev%2Fresponsive-email/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeskills-dev%2Fresponsive-email/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeskills-dev%2Fresponsive-email/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeskills-dev","download_url":"https://codeload.github.com/codeskills-dev/responsive-email/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247640461,"owners_count":20971557,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["email-templates","jsx-email","react-email","responsive-email","responsive-email-templates"],"created_at":"2024-11-19T16:46:00.719Z","updated_at":"2025-04-07T11:04:14.863Z","avatar_url":"https://github.com/codeskills-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Responsive Email\n\n`responsive-email` is a framework-agnostic set of utility components that allow to build\nresponsive email templates with the best support possible. It does not make use of\nmedia queries nor other unsupported ways of doing responsiveness on emails.\n\nIt contains the utilities to be used with both [React Email](https://react.email) and\n[jsx-email](https://jsx.email).\n\nYou can view some sample email templates inside [./samples/](./samples/).\n\n## Installation\n\nFor React Email:\n\n```bash\nnpm install @responsive-email/react-email\n```\n\nFor JSX Email:\n\n```bash\nnpm install @responsive-email/jsx-email\n```\n\n## Components\n\n### `\u003cResponsiveRow\u003e` and `\u003cResponsiveColumn\u003e`\n\n```tsx\n\u003cResponsiveRow\u003e\n  \u003cResponsiveColumn span={1}\u003eFirst\u003c/ResponsiveColumn\u003e\n  \u003cResponsiveColumn span={2}\u003eSecond\u003c/ResponsiveColumn\u003e\n  \u003cResponsiveColumn span={1}\u003eThird\u003c/ResponsiveColumn\u003e\n\u003c/ResponsiveRow\u003e\n```\n\nThese two components are only meant to be used in unison as shown in the above example.\n\nThe `\u003cResponsiveRow\u003e` will divide its `maxWidth` (which is 600 by default) into the amount\nof columns you pass onto it. It does this by detecting which one of the children are actually\nan instance of `\u003cResponsiveColumn\u003e` based on the fact that all React elements are actually objects\nunder the hood that, if they represent a Function Component instance, have their props exposed and easy to access.\n\nThe `\u003cResponsiveColumn\u003e` by itself only renders a Fragment as it is meant to only be rendered\ninside the `\u003cResponsiveRow\u003e`. The `span` property allows the user to increase the size of a certain\ncolumn so that its width can be the sum of the respective amount of columns specified in `span`, e.g.\n`span={2}` will result into a column that _has a width of two columns_.\n\nThe `\u003cResponsiveRow\u003e` will also log a warning if it finds you are using more than three columns,\nas is best practice to use only three columns on email templates.\n\nEach column will wrap in the same way as `flex` itself would, this is a behavior is known as \"collapsing\" can occur.\nIn this context, \"collapsing\" refers to the behavior where the `ResponsiveColumn` elements wrap onto a new line within the table, rather than expanding the table's width to accommodate their combined width.\n\n## Contributing\n\nContributions to `responsive-email` are welcome! If you find a bug, have suggestions for improvements, or want to add new features, feel free to open an issue or submit a pull request. Please make sure to follow the existing coding style and conventions.\n\nWhen submitting a pull request, provide a clear description of the changes made and ensure that all tests pass. Adding appropriate tests for new features or bug fixes is highly appreciated.\n\n## Bugs and Feature Requests\n\nFor bugs and feature requests, [please create an issue](https://github.com/codeskills-dev/responsive-email/issues/new).\n\n## Author\n\n- Paul Ehikhuemen ([@pauloe_me](https://twitter.com/pauloe_me))\n\n## License\n\n`responsive-email` is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeskills-dev%2Fresponsive-email","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeskills-dev%2Fresponsive-email","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeskills-dev%2Fresponsive-email/lists"}