Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zen-labss/fly
Emails writing in React, Vue and Angular.
https://github.com/zen-labss/fly
angular emails nodemailer phpmailer svelte sveltejs typescript vue vue3
Last synced: 3 months ago
JSON representation
Emails writing in React, Vue and Angular.
- Host: GitHub
- URL: https://github.com/zen-labss/fly
- Owner: zen-labss
- Created: 2022-11-18T19:47:19.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-10T18:36:27.000Z (almost 2 years ago)
- Last Synced: 2024-10-21T02:25:08.061Z (3 months ago)
- Topics: angular, emails, nodemailer, phpmailer, svelte, sveltejs, typescript, vue, vue3
- Language: TypeScript
- Homepage:
- Size: 1.04 MB
- Stars: 35
- Watchers: 2
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
![Cover Fly](/assets/coverfly.png)
## Why
Writing emails is still difficult as 2010 with HTML and CSS Inline. Well, fly is a framework that generates code for your email in your best framework, write in .vue or .tsx, either way, an HTML build is 100% compatible with your email client.
## Motivation
Well, the motivation is basically beacuse [React emails](react.emails), but React emails has a problem, it is only compatible with react... Well, why not be compatible with Vue, React, Angular? Everyone has to have access.
## Install
With yarn
```
yarn add @fly-email/react -E
```With npm
```
npm install @fly-email/react -E
```## Getting started
Add component generate in your email template.
```jsx
import { Text } from "@fly-email/react";const Email = () => {
Hello, World
;
};
```## Components
- Html ([React](https://github.com/zen-labss/fly/blob/main/packages/lib-react/src/html.tsx), [Vue](https://github.com/zen-labss/fly/blob/main/packages/lib-vue/src/html.vue))
- Button ([React](https://github.com/zen-labss/fly/blob/main/packages/lib-react/src/button.tsx), [Vue](https://github.com/zen-labss/fly/blob/main/packages/lib-vue/src/button.vue))
- Container ([React](https://github.com/zen-labss/fly/blob/main/packages/lib-react/src/container.tsx), [Vue](https://github.com/zen-labss/fly/blob/main/packages/lib-vue/src/container.tsx))
- Img ([React](https://github.com/zen-labss/fly/blob/main/packages/lib-react/src/img.tsx), [Vue](https://github.com/zen-labss/fly/blob/main/packages/lib-vue/src/img.vue))
- Section ([React](https://github.com/zen-labss/fly/blob/main/packages/lib-react/src/section.tsx), [Vue](https://github.com/zen-labss/fly/blob/main/packages/lib-vue/src/section.vue))
- Text ([React](https://github.com/zen-labss/fly/blob/main/packages/lib-react/src/text.tsx), [Vue](https://github.com/zen-labss/fly/blob/main/packages/lib-vue/src/text.vue))
- Hr ([React](https://github.com/zen-labss/fly/blob/main/packages/lib-react/src/hr.tsx), [Vue](https://github.com/zen-labss/fly/blob/main/packages/lib-vue/src/hr.vue))## Integrations
- [Nodemailer](https://github.com/zen-labss/fly/tree/main/examples/nodemailer)
- [PhpMailer](https://github.com/zen-labss/fly/tree/main/examples/phpmailer)## Support
Components compatible with your best client email.
| | | | |
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| Gmail ✔ | Apple Mail ✔ | Outlook ✔ | Yahoo! Mail ✔ |## Contributors
- [Giovanni Soares](https://github.com/shumtz)