Skip to content

added Template & Updated readme #132

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

added Template & Updated readme #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
18be5ff
added Template & Updated readme
Oct 22, 2022
9f407a7
updated readme
Oct 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
253 changes: 164 additions & 89 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,140 +31,209 @@ Join the Gitter channel [here](https://gitter.im/LeaopardLabs/React-Email) for d
<a href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.heygears.com%2Fleopardslab%2Freact-email"><img alt="Twitter" src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.heygears.com%2Fleopardslab%2Freact-email"></a>
</p>

## Installation
# 📶 About

**Using npm**
A React-Based component and utility method-based lightweight library to provide a common interface for email building that users can install and use to build clean and responsive email easily.

# 📍 React Email Components

A collection of React components to help build consistent cross-client emails. As well as the layout components, there is a function that inlined your styles before the page is rendered.

Note: This was built for a Stylus workflow, additional work will have to be done to get this working with vanilla CSS or another preprocessor.

# 🔰 Getting started

ReactEmailComponents is split up into two modules:

- react-email-components
- react-email-components-stylus
Although they are both necessary, their setup is entirely different and therefore separated. To get started, follow the steps below for each.

# ❇️ Installation

## react-email-components

this module contains all of the React components necessary to get ReactEmailComponents to work.

Install using NPM or Yarn:

```bash
npm install @leopardslab/react-email
```

```bash
npm i @leopardslab/react-email
npm install react-email-components
```

Import the desired components into your React app:

```javascript
import { Container, Block, Row, Column, Spacer } from 'react-email-components';
```

or
## react-email-components-stylus

This module contains the Stylus mixins and functions necessary to get ReactEmailComponents to work.

Install using NPM or Yarn:

```bash
npm install --save @leopardslab/react-email
npm install react-email-components-stylus
```

**Using Yarn**
### Require the Stylus module in your main stylesheet:

```bash
yarn add @leopardslab/react-email
@require 'react-email-components-stylus'
```

## Glimpses of usage
# 🛞 Dependencies

```jsx
import { Email, Section, Column, Typography } from '@leopardslab/react-email';
ReactEmailComponents depends on the following libraries:

export const HelloEmail = ({ name }) => {
return (
<Email>
<Section>
<Column>
<Typography variant="h2">Hello {name}</Typography>
</Column>
</Section>
</Email>
);
};
```
- "@leopardslab/react-email": "^1.15.3"
- "react": "^18.2.0"
- "react-dom": "^18.2.0"
- "nodemailer": "^6.7.8"
- "tslib": "^2.4.0"

**Want to add some custom styles?**
\*\* Note, use the latest version of the above libraries.

Here we go:
# 📌 Usage

```jsx
import { Divider, Email, Section, Column, Typography } from '@leopardslab/react-email';
## Create your Email Layout :

const styles = {
greyBackground: {
backgroud: 'grey',
},
};
- Starting with a blank project

All the layouts are created in typescript and are exported as a react component. You can use the layouts as a base for your email.

### Create your Email Template :

```typescript
import { Email, Typography } from '@leopardslab/react-email';

export const HelloEmail = ({ name }) => {
export const EmailTemplate = ({ name }: { name: string }) => {
return (
<Email>
<Section>
<Column>
<Typography variant="h2">Hello {name}</Typography>
</Column>
<Divider />
<Column classes={{ root: styles.greyBackground }}>
<Typography variant="h2">Hello {name}</Typography>
</Column>
</Section>
<Typography>
<h1>Hello {name}</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Paragraph</p>
<a href="https://www.google.com">Link</a>
</Typography>
</Email>
);
};
```

**You can also define and load a fully custom theme!** 🤯
```
* rap the entire return statement in a <Email> component
```

```jsx
import { Email, Section, Column, Typography } from '@leopardslab/react-email';
import darkTheme from './theme';
# 💠 Components

export const HelloEmail = ({ name }) => {
return (
<Email theme={darkTheme}>
### Emails

The Email component is the root component for all emails. It is responsible for setting the default styles for the email and inlining the styles before the page is rendered.

### Typography

The Typography component is a wrapper for all of the typography components. It is responsible for setting the default styles for the typography components.

## Section

The Section component is a wrapper for all of the layout components. It is responsible for setting the default styles for the layout components.

## Column

The Column component is a wrapper as Column under the Section component. It is responsible for setting the default styles for the Column components.

## Button

The Button component for defining a button in the email. It is responsible for setting the default styles for the button..

## Image

The Image component for defining a image in the email. It is responsible for setting the default styles for the image.

# ⚙️ Component Stylings:

## 1) Adding parameters inside the component to change the style of the component.

This should be done in the following way:

```css
classes= {
{
root: {
margin: '10px 0 20px 0';
}
}
}
```

Example:

```TypeScript
<Email>
<Section>
<Column>
<Typography variant="h2">Hello {name}</Typography>
<Typography classes={{root: {margin: "10px 0 20px 0"}}} variant="h2">
Hello
</Typography>
</Column>
</Section>
</Email>
);
};
</Email>
```

**Create your own component like this:**
## 2) Using "MakeStyles" to change the style of the component.

```jsx
// InfoPanel.jsx
This should be done in the following way:

```css
const useStyles = makeStyles({
root: { padding: '10px' },
info: { border: '1px solid #DD5353' },
warn: { border: '1px solid #FF731D' },
title: {
color: "red",
},
paragraph: {
color: "blue",
},
});

export const InfoPanel = ({
children,
variant = 'info',
classes, // if you want to override some styles when you are using the component
}) => {
const styles = useStyles({ classes });
const infoPanelStyle = sx(styles.root, styles[variant]); // combines root and variant specific styles
/* add the hook in the export function */

return <div style={infoPanelStyle}>{children}</div>;
};
const styles = useStyles();

// HelloWorld.jsx
import { InfoPanel } from './InfoPanel';
```

const styles = {
greyBackground: {
backgroud: 'grey',
},
};
# Generate Email Template

export const HelloEmail = ({ name }) => {
return (
<Email theme={darkTheme}>
<Section>
<Column>
<InfoPanel variant="info">Hello {name}!!!!</InfoPanel>
<InfoPanel variant="warn" classes={{ root: styles.greyBackground }}>
Be prepared!
</InfoPanel>
</Column>
</Section>
</Email>
);
};
- Add a file Generate.js in the root directory of the project.

```JavaScript
const { writeFileSync } = require('fs');
const {autoConfig} = require ("./config.js");
const {
generateEmail,
generateTextEmailFromHTML,
validateEmail,
} = require("@leopardslab/react-email");
const { EmailTemplate } = require("./lib/cjs");

const html = generateEmail(EmailTemplate({ name: "John" }));
writeFileSync("./index.html", html);

const text = generateTextEmailFromHTML(html);

console.log(text);
```

## Inspiration
\*\*Importing "EmailTemplate" that you have created [Email Layout](#create-your-email-template)

# Inspiration

The idea of a React Component Library for Emails is not novel. There have been other implementations around for a while and we were inspired a lot by these solutions and many other generic Component Libraries. Following are a few of the amazing other implementations.

Expand All @@ -174,3 +243,9 @@ We try to be the community backed up-to-date solution one can depend on and cont
- [https://www.npmjs.com/package/react-email-components](https://www.npmjs.com/package/react-email-components)
- [https://mjml.io/getting-started/1](https://mjml.io/getting-started/1)
- [https://github.com/ovrsea/medium-articles/tree/master/react-email-templates](https://github.com/ovrsea/medium-articles/tree/master/react-email-templates)

<br>

# References

### You can watch this [video](https://www.youtube.com/watch?v=0vbLYyPerhU&ab_channel=NiloySik) to get complete info about the package and how to use it to build clean and responsive email layouts easily.
Loading