Özelliklerinize uygun ReactJS ve E-posta imzaları
Dec 10 2022
Her şeyden önce, buraya gelen okuyuculara ve Brezilya'da yer aldığım geliştirme ekibi Vá de Taxi'ye gerçekten teşekkür etmek istiyorum! İnternette çok arama yaparak, tamamlamam gereken görevlerimden biri olan bir e-posta imzasının nasıl yapılacağına dair parçacıklar buldum. Bununla birlikte, içeriği teslim etmekte gecikme yaşadım, ancak şimdi konuyu daha kolay ele almak için, siz beyler okuyucular için burada yayınlayacağım.
Her şeyden önce, buraya gelen okuyuculara ve Brezilya'da yer aldığım geliştirme ekibi Vá de Taxi'ye gerçekten teşekkür etmek istiyorum! İnternette çok arama yaparak, tamamlamam gereken görevlerimden biri olan bir e-posta imzasının nasıl yapılacağına dair parçacıklar buldum. Bununla birlikte, içeriği teslim etmekte gecikme yaşadım, ancak şimdi konuyu daha kolay ele almak için, siz beyler okuyucular için burada yayınlayacağım. E-postanın çok teknolojik bir şey olmadığı ve tablolardaki bir e-posta imzasını HTML'deki kodla yorumladığı varsayımından başlamamız gerekecek. Bu yüzden HTML ile bir tablo oluşturmalıyız ve stil satır içi olmalıdır, şöyle bir şeye benzeyecektir:
<table>
<tbody>
<tr>
<td>
<img src="" style="ANY STYLE" />YOUR LOGO IMAGE
</td>
<td>
OPCIONAL DIV
</td>
<table>
<tbody>
<tr>
<td>
<span style="ANY STYLE">YOUR NAME</span> <span style="ANY STYLE">LAST NAME OR CARRER NAME</span>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<img src="" style="ANY STYLE"/>PHONE ICON
</td>
<td>
<span style="ANY STYLE">YOUR PHONE</span>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<img src="" style="ANY STYLE"/> SITE ICON
</td>
<td>
<span style="ANY STYLE">YOUR SITE</span>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<img src="" style="ANY STYLE"/> FACEBOOK ICON
</td>
<td>
<img src="" style="ANY STYLE"/> INSTAGRAM ICON
</td>
<td>
<img src="" style="ANY STYLE"/> LINKEDIN ICON
</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
table, th, td {
border: 1px solid;
}
Stili sol ve sağ ızgarayla ayırdığımız bir E-posta İmza bileşenimiz var. css'i beğeninize göre koyun
import React, { Fragment, useState } from 'react';
import Infos from '../Infos/index';
import Preview from '../Preview/index';
import { EmailSignatureStyle } from './styles';
const EmailSignature = () => {
const [user, setUser] = useState([]);
return (
<Grid className="container" container spacing={0}>
<Grid item xs={4}>
<Box className="boxLeft">
<Infos setUser={setUser} />
</Box>
</Grid>
<Grid item xs={8}>
<Box className="boxRight">
<Preview user={user} />
</Box>
</Grid>
</Grid>
);
};
export default EmailSignature;
import PropTypes from 'prop-types';
import React, { useState } from 'react';
import Input from '../Input/index';
const Infos = (props) => {
const { setUser } = props;
const classes = useStyles();
const [userData, setUserData] = useState({
name: '',
carrer: '',
phone: '',
});
const handleChangeField = (field) => (event) => {
const value = event?.target?.value || '';
setUserData((prev) => ({ ...prev, [field]: value }));
};
setUser(userData);
return (
<div className="container">
<div className="title">
{' '}
<span>Insira as informações que serão exibidas na assinatura</span>{' '}
</div>
<Input
label="Name"
value={userData.name}
onChange={handleChangeField('name')}
/>
<Input
className="carrer"
label="Carrer"
value={userData.carrer}
onChange={handleChangeField('carrer')}
/>
<Input
type="number"
label="Phone"
value={
userData.phone
}
onChange={handleChangeField('phone')}
/>
</div>
);
};
Infos.propTypes = {
setUser: PropTypes.isRequired,
};
export default Infos;
import { TextField } from '@mui/material';
import PropTypes from 'prop-types';
import React from 'react';
const Input = (props) => {
const classes = useStyles();
const { id, label, defaultValue, error, helperText, type, value, onChange } =
props;
return (
<TextField
id={id}
type={type}
label={label}
error={error}
helperText={helperText}
className="input"
defaultValue={defaultValue}
value={value}
onChange={onChange}
/>
);
};
Input.propTypes = {
id: PropTypes.isRequired,
label: PropTypes.isRequired,
defaultValue: PropTypes.isRequired,
error: PropTypes.isRequired,
helperText: PropTypes.isRequired,
type: PropTypes.isRequired,
value: PropTypes.isRequired,
onChange: PropTypes.isRequired,
};
export default Input;
Panoya metin yerleştirmek hızlı bir şekilde yapılır. Ancak görüntüleri veya zengin metin veya HTML gibi diğer metin biçimlerini nasıl ele alırsınız? JavaScript ile bunları da panoya koymak mümkün mü?
Panoya içerik koymak için başka bir yöntem daha var — ( clipboard.write ).
clipboard.writedizeleri kabul etmez ama ClipboardItems. İki yöntem arasındaki temel fark, panoya düz metin dışında herhangi bir şey koymak istiyorsanız, eşleşen MIME türünü bir ClipboardItem.
Yazmak için daha fazla kod ama bence yine de iyi bir deneyim. Tatlı!
import PropTypes from 'prop-types';
import React, { useState, useRef } from 'react';
const Preview = (props) => {
const { user } = props;
const div = useRef(null);
const [copySuccess, setCopySuccess] = useState(false);
const classes = useStyles();
const copyToClipboard = async () => {
const html = div.current;
try {
const success = await navigator.clipboard.write([
new ClipboardItem({
'text/html': new Blob([html.innerHTML], {
type: 'text/html',
}),
}),
]);
setCopySuccess(true);
return success;
} catch (e) {
console.log('Fail', e);
}
setCopySuccess(true);
}
return (
<div>
<div>
<span className="spanHeader">
TITLE
</span>
</div>
<div className="contentDesc">
<span className="spanDescription">
DESCRIPTION <br />
</span>
</div>
<div className="contentTable">
{user.name && (
<table ref={div}>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<img
style={{ width: '12vw', margin: '0 20px 0 0' }}
className={classes.logo}
src=""
alt="logo"
/>
</td>
<table>
<tbody>
<tr>
<td style={{ textAlign: 'initial' }}>
<span
style={{
fontWeight: 'bold',
fontSize: '12pt',
color: '#1d71a5',
textTransform: 'capitalize',
fontFamily: 'Verdana',
}}
>
{user.name} -
</span>
<span> </span>
<span
style={{
fontWeight: 'bold',
fontSize: '12pt',
color: '#4D4D4D',
textTransform: 'capitalize',
fontFamily: 'Verdana',
}}
>
{user.carrer}
</span>
{user.phone && (
<table
style={{
margin: '5px 0 0 0',
}}
>
<tbody>
<tr>
<td
style={{
margin: '5px 0',
}}
>
<img
src="https://i.postimg.cc/xdCDbRcX/icone-telefone-assinatura-email.png"
color="#1d71a5"
alt="Telefone icon"
style={{
width: '12px',
display: 'block',
margin: '0 10px 0 0',
}}
/>
</td>
<td>
<span
style={{
fontSize: '12px',
color: '#000',
textTransform: 'capitalize',
}}
>
user.phone
</span>
</td>
</tr>
</tbody>
</table>
)}
{user.phone && (
<table
style={{
margin: '5px 0 0 0',
}}
>
<tbody>
<tr>
<td
style={{
margin: '5px 0',
}}
>
<img
src="https://i.postimg.cc/nhTfz5c8/icone-site-assinatura-email.png"
color="#1d71a5"
alt="Website URL icon"
style={{
width: '12px',
display: 'block',
margin: '0 10px 0 0',
}}
/>
</td>
<td>
<span
style={{
fontSize: '12px',
color: '#000',
textDecoration: 'none',
}}
>
YOUR SITE
</span>
</td>
</tr>
</tbody>
</table>
)}
{user.phone && (
<table
style={{
marginTop: '-5px',
}}
>
<tbody>
<tr>
<td
style={{
margin: '5px 0',
}}
>
<a
href=""
style={{
display: 'inline-block',
padding: '0px',
margin: '5px 0 0 5px',
}}
>
<img
src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/facebook-icon.png"
alt="facebook"
style={{
backgroundColor: '#1d71a5',
maxWidth: '135px',
display: 'block',
width: '80%',
}}
/>
</a>
</td>
<td>
<a
href=""
style={{
display: 'inline-block',
padding: '0px',
margin: '5px 0 0 5px',
}}
>
<img
src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/instagram-icon.png"
alt="facebook"
color="#1d71a5"
style={{
backgroundColor: '#1d71a5',
maxWidth: '135px',
display: 'block',
width: '80%',
}}
/>
</a>
</td>
<td>
<a
href=""
color="#1d71a5"
style={{
display: 'inline-block',
padding: '0px',
margin: '5px 0 0 5px',
}}
>
<img
src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon.png"
alt="facebook"
color="#1d71a5"
style={{
backgroundColor: '#1d71a5',
maxWidth: '135px',
display: 'block',
width: '80%',
}}
/>
</a>
</td>
</tr>
</tbody>
</table>
)}
</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
<table
style={{
maxWidth: '540px',
}}
>
<tbody>
<tr>
<td
style={{
fontSize: '6pt',
width: '80%',
color: '#9FA6AE',
}}
>
ANY TEXT HERE
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
)}
</div>
<div>
{user.name && (
<button
type="submit"
style={{
marginTop: '30px',
marginBottom: '10px',
height: '45px',
width: '85px',
backgroundColor: '#1d71a5',
color: '#fff',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer',
}}
onClick={copyToClipboard}
>
Copy
</button>
)}
{copySuccess && (
<div style={{ color: 'green' }}> ✔︎ Copy with Sucess! </div>
)}
</div>
</div>
);
};
Preview.propTypes = {
user: PropTypes.isRequired,
};
export default Preview;
Araştırma yapmadım ama panoya metin dışında başka şeyler yerleştirmek için tarayıcılar arası bir çözüm arıyorsanız, eminim bazı kütüphaneler aradığınızı bulmuştur.
Artık bazı kodlar gördüğünüze göre sihir numarasının nasıl çalıştığını hayal edebiliyor musunuz?
Doğru; hile, farklı içerik MIME türlerine dayanmaktadır. Girdi alanları ve metin alanları, yapıştırılan düz metni gayet iyi işler, ancak başka kullanılabilir MIME türleri de vardır.
Bir pano image/gif, image/jpeg, text/rtf, eski güzel türleri text/htmlve her türlü fanteziyi tutabilir.
Pano API'si sayesinde MIME türünün kontrolü sizdedir ve hatta metin ve görüntüleri aynı yazma işleminde depolayabilirsiniz.
Ve bu sadece tek bir operasyon değil; hatta tek bir pano girişi .
avigator.clipboard.write([
new ClipboardItem({
'text/plain': new Blob(["That's some cool plain text, isn't it?"], {
type: 'text/plain',
}),
'text/html': new Blob(
[
'<div style="/* some styles */">Oh yeah - text/html!</div>',
],
{
type: 'text/html',
}
),
}),
]);
![Bağlantılı Liste Nedir? [Bölüm 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
Gene Simmons, KISS Çizgi Romanlarının Potansiyel Olarak "İnsanlığı Yeniden Yaratabileceğini" Söyledi
Nicole Kidman, Michael Keaton ve Val Kilmer'in Batman Olarak Paylaştığı Bu 1 Çekici Özelliğe Bayıldı
Tom Girardi Dolandırıcılık Suçlamalarından Yargılanma Yetkisinin Belirlenmesi İçin Duruşmaya Katıldı
Kevin Jonas'ın Kızı Alena, Doğum Günü Fotoğrafında Büyümüş Görünüyor: '9 Yaşında Gerçek Hissetmiyor'
