{"id":13451912,"url":"https://github.com/chromakode/react-html-email","last_synced_at":"2025-05-15T06:02:47.088Z","repository":{"id":3263263,"uuid":"48901605","full_name":"chromakode/react-html-email","owner":"chromakode","description":"Create elegant HTML email templates using React.","archived":false,"fork":false,"pushed_at":"2023-03-01T11:25:06.000Z","size":192,"stargazers_count":894,"open_issues_count":34,"forks_count":116,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-05-13T17:02:16.704Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chromakode.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-01-02T06:52:59.000Z","updated_at":"2025-05-11T18:57:24.000Z","dependencies_parsed_at":"2023-02-14T02:01:43.134Z","dependency_job_id":null,"html_url":"https://github.com/chromakode/react-html-email","commit_stats":{"total_commits":94,"total_committers":12,"mean_commits":7.833333333333333,"dds":"0.13829787234042556","last_synced_commit":"e6f3b5122a19823fac31870649311c52e46c75f8"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chromakode%2Freact-html-email","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chromakode%2Freact-html-email/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chromakode%2Freact-html-email/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chromakode%2Freact-html-email/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chromakode","download_url":"https://codeload.github.com/chromakode/react-html-email/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254003112,"owners_count":21997837,"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":[],"created_at":"2024-07-31T07:01:06.737Z","updated_at":"2025-05-15T06:02:47.067Z","avatar_url":"https://github.com/chromakode.png","language":"JavaScript","readme":"# react-html-email\n\n## :warning: Currently Unmaintained\n\n`react-html-email` is presently unmaintained. As React has matured, it is no longer as necessary to use a separate library to generate email-specific markup. I'd encourage you to look at more recent CSS-in-JS and style inlining component libraries as the basis for building your own email design system, though these components can serve as a useful starting point.\n\nI think the future of this project would be a generic set of design components for email templates -- something akin to [Chakra UI](https://chakra-ui.com/) for email. If you'd be interested in taking ownership of this project and tackling that, drop me a line at react-html-email@chromakode.com.\n\n---\n\n[![Build Status](https://img.shields.io/travis/chromakode/react-html-email/master.svg?style=flat-square)](https://travis-ci.org/chromakode/react-html-email)\n[![Coverage Status](https://img.shields.io/codecov/c/github/chromakode/react-html-email/master.svg?style=flat-square)](https://codecov.io/github/chromakode/react-html-email?branch=master)\n[![npm](https://img.shields.io/npm/v/react-html-email.svg?style=flat-square)](https://www.npmjs.com/package/react-html-email)\n[![npm](https://img.shields.io/npm/l/react-html-email.svg?style=flat-square)](https://github.com/chromakode/react-html-email/blob/master/LICENSE)\n\nModern HTML emails are a tangle of archaic HTML and inline styles. This library encapsulates the cruft into simple React components and helps avoid common pitfalls.\n\n[react-html-email](https://github.com/chromakode/react-html-email) provides a set of components for a standard 600px table layout (inspired by [HTML Email Boilerplate](https://github.com/seanpowell/Email-Boilerplate)). React's [Supported Tags and Attributes](http://facebook.github.io/react/docs/tags-and-attributes.html) are extended to include a few deprecated attributes useful for legacy clients. In addition, a `style` prop validator is included which uses [Campaign Monitor's CSS Support Guide](https://www.campaignmonitor.com/css/) to check for potential compatibility issues across email clients.\n\n## Installation\n\n    $ npm install react-html-email\n\n## Usage\n\nTo render a simple email:\n\n```js\nimport { Email, Item, Span, A, renderEmail } from 'react-html-email'\n\nconst emailHTML = renderEmail(\n  \u003cEmail title=\"Hello World!\"\u003e\n    \u003cItem align=\"center\"\u003e\n      \u003cSpan fontSize={20}\u003e\n        This is an example email made with:\n        \u003cA href=\"https://github.com/chromakode/react-html-email\"\u003ereact-html-email\u003c/A\u003e.\n      \u003c/Span\u003e\n    \u003c/Item\u003e\n  \u003c/Email\u003e\n)\n```\n\nYou can find more examples in the [examples directory](https://github.com/chromakode/react-html-email/tree/master/examples) of the repo.\n\n\n## API\n\n### `renderEmail(emailComponent)`\n\nRender an email component to an HTML string. Adds an XHTML 1.0 Strict doctype, as per [HTML Email Boilerplate](https://github.com/seanpowell/Email-Boilerplate).\n\n### `configStyleValidator(config)`\n\nBy default, inline styles passed to the `style` prop will be validated against [Campaign Monitor's CSS Support Guide](https://www.campaignmonitor.com/css/). Here are the default settings, which can be overridden using `configStyleValidator`:\n\n```js\nReactHTMLEmail.configStyleValidator({\n  // When strict, incompatible style properties will result in an error.\n  strict: true,\n\n  // Whether to warn when compatibility notes for a style property exist.\n  warn: true,\n\n  // Platforms to consider for compatibility checks.\n  platforms: [\n    'gmail',\n    'gmail-android',\n    'apple-mail',\n    'apple-ios',\n    'yahoo-mail',\n    'outlook',\n    'outlook-legacy',\n    'outlook-web',\n  ],\n})\n```\n\n### `PropTypes.style`\n\nA PropTypes validator for checking email inline style compatibility. Used by default in the components below. Exported for use in your own components.\n\n## Components\n\nComponents in `react-html-email` include defaults for basic style properties, so that client styles are reset and normalized. Every component accepts a `style` prop which overrides the reset styles.\n\n### `\u003cEmail\u003e`\n\nAn HTML document with a centered 600px `\u003ctable\u003e` inside `\u003ctable\u003e` container based on [HTML Email Boilerplate](https://github.com/seanpowell/Email-Boilerplate).\n\nIt's necessary to always include a `title` prop for some clients' \"open in browser\" feature.\n\nSee [MailChimp's HTML guide](http://templates.mailchimp.com/development/html/) for how this works.\n\n### `\u003cBox\u003e`\n\nA simplification of the `\u003ctable\u003e` element, the workhorse of an HTML email design. `\u003cBox\u003e`es contain a vertical stack of `\u003cItem\u003e`s. Use them to create visual structure, filled buttons, and spacing.\n\n### `\u003cItem\u003e`\n\nA subsection of a `\u003cBox\u003e`, essentially a `\u003ctr\u003e\u003ctd\u003e` unit.\n\n### `\u003cSpan\u003e`\n\nUse to assign styles to text.\n\nIt can be handy to create an object containing your default text styles for reuse. For example:\n\n```js\nconst textDefaults = {\n  fontFamily: 'Verdana',\n  fontSize: 42,\n  fontWeight: 'bold',\n  color: 'orange',\n}\n\n[...]\n\n\u003cSpan {...textDefaults}\u003eCongratulations!\u003c/Span\u003e\n\u003cSpan {...textDefaults}\u003eYou won a free cruise!\u003c/Span\u003e\n```\n\n### `\u003cA\u003e`\n\nUse to format links. Requires an `href` prop. Always sets `target=\"_blank\"` and defaults to underline. To remove the underline, set `textDecoration=\"none\"`.\n\n### `\u003cImage\u003e`\n\nAn image, without any pesky borders, outlines, or underlines by default. Requires a `src` prop, and `width` and `height` to be set. You can override the default styles (such as adding a border) using the `style` prop.\n\n## Head CSS and Media Queries\nYou can pass a string prop `headCSS` to your `\u003cEmail\u003e` component. You can see it in our [kitchenSink.jsx](https://github.com/chromakode/react-html-email/blob/master/examples/kitchenSink.jsx) example.\n\n## Mailchimp attributes\nIf you're using Mailchimp and need to add their custom `mc:edit` attributes to your markup, we recommend using the [mailchimpify](http://github.com/Roilan/mailchimpify) module.\n\n## License\n\n[MIT](https://github.com/chromakode/react-html-email/blob/master/LICENSE)\n","funding_links":[],"categories":["JavaScript","Github Repositories","Email"],"sub_categories":["Frontend Development"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchromakode%2Freact-html-email","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchromakode%2Freact-html-email","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchromakode%2Freact-html-email/lists"}