diff --git a/README.md b/README.md index 879294b..4efb728 100644 --- a/README.md +++ b/README.md @@ -31,140 +31,209 @@ Join the Gitter channel [here](https://gitter.im/LeaopardLabs/React-Email) for d Twitter

-## 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 ( - -
- - Hello {name} - -
- - ); -}; -``` +- "@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 ( -
- - Hello {name} - - - - Hello {name} - -
+ +

Hello {name}

+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+

Paragraph

+ Link + ); }; ``` -**You can also define and load a fully custom theme!** 🤯 +``` +* rap the entire return statement in a component +``` -```jsx -import { Email, Section, Column, Typography } from '@leopardslab/react-email'; -import darkTheme from './theme'; +# 💠 Components -export const HelloEmail = ({ name }) => { - return ( - +### 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 +
- Hello {name} + + Hello +
- - ); -}; + ``` -**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
{children}
; -}; +const styles = useStyles(); -// HelloWorld.jsx -import { InfoPanel } from './InfoPanel'; +``` -const styles = { - greyBackground: { - backgroud: 'grey', - }, -}; +# Generate Email Template -export const HelloEmail = ({ name }) => { - return ( - -
- - Hello {name}!!!! - - Be prepared! - - -
- - ); -}; +- 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. @@ -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) + +
+ +# 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. diff --git a/example/src/Layouts/NewsLetter.tsx b/example/src/Layouts/NewsLetter.tsx new file mode 100644 index 0000000..bb167ad --- /dev/null +++ b/example/src/Layouts/NewsLetter.tsx @@ -0,0 +1,94 @@ +import { + Email, + Typography, + Section, + Column, + Image, + Button, + Divider, +} from '@leopardslab/react-email'; + +export const NewsLetter = () => { + return ( + +
+ + Insta-NewsLetter date 2020-10-10 + + + + Google urges software developers to build apps for Pixel Watch + + + + + + Tech giant Google has urged software and app developers to build more apps for its + newly-launched Pixel Watch based on Wear operating system (OS).In its Android Developers + blog, the company highlighted apps for Pixel Watch. "It's an especially great time to + prepare your app so it looks great on all of the new watches that consumers will get their + hands on", according to the Android developer team. + + +
+ + Other Related News + +
+ + + + + + 5G ROLLOUT IN INDIA: WHICH INDIAN CITIES WILL GET 5G SERVICES IN THE FIRST PHASE. + + + 5G services in India are soon going to be operational. As per recent reports, the + Government of India would officially launch a number of 5G services at the inauguration + of the India Mobile Congress, or IMC, on September 29, 2022.5G services in India will be + rolled out in a phased manner. In the first phase, only 13 selected cities would get + speed 5G internet services from either Airtel, Jio, or both. + + + +
+ +
+ + + Elon Musk Has A 'super App' Plan For Twitter. It's Super Vague. + + + Elon Musk has a penchant for the letter “X.” He calls his son with the singer Grimes, + whose actual name is a collection of letters and symbols, “X.” He named the company he + created to buy Twitter "X Holdings." His rocket company is, naturally, SpaceX.Now he + also apparently intends to morph Twitter into an “everything app” he calls X.For months, + the Tesla and SpaceX CEO has expressed interest in creating his own version of China's + WeChat — a “super app” that does video chats, messaging, streaming and payments — for + the rest of the world.. + + + + + + + +
+ + ); +};