npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

responsive-react-email

v0.0.5

Published

A utility for writing responsive email templates with react-email

Downloads

4,427

Readme

Responsive react email

Description

responsive-react-email is a utility for writing responsive email templates with react-email. This tool takes on an opinionated approach to creating responsive email templates using best practices that improve support across majority of email clients.

View Demo on CodeSandbox

Table of contents

Installation

Add responsive-react-email to your react-email project.

With yarn

yarn add responsive-react-email

With npm

npm install responsive-react-email

Components

SingleColumn component

a react-email component that preserves your content layout as a single column on all screen sizes in the email client.

Example

import { SingleColumn } from "responsive-react-email";

{/* OR */}

import { SingleColumn } from "responsive-react-email/single-column"; // for tree-shakeability;

export const DemoTemplate = () => {
    return(
          <Html>
            <Head />
            <Preview>Responsive Single Column Template</Preview>

            <Body>
            <Container>
                <SingleColumn children={/* Content goes here */} />

                {/* OR */}

                <SingleColumn>
                    {/* Content goes here */}
                </SingleColumn>

            </Container>
            </Body>
        </Html>
    )
}

export default DemoTemplate

Props

children field

  • Type: string

  • Description: Contains the content that will be rendered in the single column layout of the email template.

styles field

  • Type: React.CSSProperties

  • Description: Provide custom styles for the wrapper component

pX field

  • Type: number

  • Description: Numerical value for padding-left and padding-right.

pY field

  • Type: number

  • Description: Numerical value for padding-top and padding-bottom.

DualColumn component

a react-email component that displays your content in a two-column layout on big screens (tablet and desktop) and collapses to a single column on smaller screen sizes.

Example

import { DualColumn } from "responsive-react-email";

{/* OR */}

import { DualColumn } from "responsive-react-email/dual-column"; // for tree-shakeability

export const DemoTemplate = () => {
    return(
          <Html>
            <Head />
            <Preview>Responsive Dual Column Template</Preview>

            <Body>
            <Container>
                <DualColumn
                styles={/* Styles for two-column wrapper */}
                columnOneContent={
                    /* Content for the first column */
                }
                columnOneStyles={/* Styles for the first column */}
                columnTwoContent={
                 /* Content for the second column */
                }
                columnTwoStyles={/* Styles for the second column */}
                />
            </Container>
            </Body>
        </Html>
    )
}

export default DemoTemplate

Props

columnOneContent field

  • Type: string

  • Description: Contains the content that will be rendered in the first column of the dual-column layout of the email template.

columnOneStyles field

  • Type: string

  • Description: Provide custom styles for the first column of the dual-column layout of the email template.

columnTwoContent field

  • Type: string

  • Description: Contains the content that will be rendered in the second column of the dual-column layout of the email template.

columnTwoStyles field

  • Type: string

  • Description: Provide custom styles for the second column of the dual-column layout of the email template.

styles field

  • Type: React.CSSProperties

  • Description: Provide custom styles for the wrapper component

pX field

  • Type: number

  • Description: Numerical value for padding-left and padding-right.

pY field

  • Type: number

  • Description: Numerical value for padding-top and padding-bottom.

TripleColumn component

a react-email component that displays your content in a three-column layout on big screens and collapses in a sort of flex-wrap: wrap manner till it gets to a single column on smaller screen sizes.

Example

import { TripleColumn } from "responsive-react-email";

{/* OR */}

import { TripleColumn } from "responsive-react-email/triple-column"; // for tree-shakeability

export const DemoTemplate = () => {
    return(
          <Html>
            <Head />
            <Preview>Responsive Dual Column Template</Preview>

            <Body>
            <Container>
                <TripleColumn
                styles={/* Styles for two-column wrapper */}
                columnOneContent={
                    /* Content for the first column */
                }
                columnOneStyles={/* Styles for the first column */}
                columnTwoContent={
                 /* Content for the second column */
                }
                columnTwoStyles={/* Styles for the second column */}
                 columnThreeContent={
                 /* Content for the third column */
                }
                columnThreeStyles={/* Styles for the third column */}
                />
            </Container>
            </Body>
        </Html>
    )
}

export default DemoTemplate

Props

columnOneContent field

  • Type: string

  • Description: Contains the content that will be rendered in the first column of the triple-column layout of the email template.

columnOneStyles field

  • Type: string

  • Description: Provide custom styles for the first column of the triple-column layout of the email template.

columnTwoContent field

  • Type: string

  • Description: Contains the content that will be rendered in the second column of the triple-column layout of the email template.

columnTwoStyles field

  • Type: string

  • Description: Provide custom styles for the second column of the triple-column layout of the email template.

columnThreeContent field

  • Type: string

  • Description: Contains the content that will be rendered in the third column of the triple-column layout of the email template.

columnThreeStyles field

  • Type: string

  • Description: Provide custom styles for the third column of the triple-column layout of the email template.

styles field

  • Type: React.CSSProperties

  • Description: Provide custom styles for the wrapper component

pX field

  • Type: number

  • Description: Numerical value for padding-left and padding-right.

pY field

  • Type: number

  • Description: Numerical value for padding-top and padding-bottom.

Supported Email Clients

The provided React-email components and default styling are designed to work well across various email clients and providers. However, due to the inconsistent support for modern web standards in different email clients, it's recommended to test your email templates in multiple clients to ensure compatibility.

The following email clients are known to be supported:

| | | | | | | | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | Gmail ✔ | Apple Mail ✔ | Outlook ✔ | Yahoo! Mail ✔ | HEY ✔ | Superhuman ✔ |

Contributing

Contributions to responsive-react-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.

When 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.

Bugs and Feature Requests

For bugs and feature requests, please create an issue.

Author

License

responsive-react-email is licensed under the MIT License.