ReactJS e firme e-mail con le tue particolarità
Prima di tutto, voglio davvero ringraziare i lettori che sono finiti qui e il team di sviluppo di cui faccio parte in Brasile, Vá de Taxi! Cercando molto su Internet, ho trovato frammenti di come creare una firma e-mail che era una delle mie attività da completare. Con ciò, ho avuto un ritardo nella consegna del contenuto, ma ora con più facilità nell'affrontare l'argomento, lo pubblicherò qui per voi signori lettori. Dovremo partire dal presupposto che la posta elettronica non è una cosa molto tecnologica, e interpreta una firma di posta elettronica in tabelle, con il codice in HTML. Quindi dobbiamo creare una tabella con HTML e lo stile deve essere in linea, dovrebbe assomigliare a questo:
<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;
}
Abbiamo un componente Firma e-mail in cui separiamo lo stile dalla griglia sinistra e destra. Metti il css a tuo piacimento
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;
Il posizionamento del testo negli appunti è fatto rapidamente. Ma come gestiresti le immagini o altri formati di testo come richtext o HTML? È possibile inserirli negli appunti anche con JavaScript?
C'è un altro metodo disponibile per inserire il contenuto negli appunti: ( clipboard.write ).
clipboard.writenon accetta stringhe ma ClipboardItems. La differenza principale tra i due metodi è che se si desidera inserire negli appunti qualcosa di diverso dal testo normale, è necessario definire il tipo MIME corrispondente utilizzando un file ClipboardItem.
È più codice da scrivere ma secondo me è comunque un'esperienza decente. Dolce!
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;
Non ho fatto la ricerca, ma se stai cercando una soluzione cross-browser per inserire cose diverse dal testo negli appunti, sono sicuro che alcune librerie ti hanno coperto.
Riesci già a immaginare come funziona il trucco magico ora che hai visto del codice?
Giusto; il trucco si basa su diversi tipi MIME di contenuto. I campi di input e le aree di testo gestiscono bene il testo normale incollato, ma ci sono ovviamente altri tipi MIME disponibili.
Un blocco appunti potrebbe contenere tipi di image/gif, image/jpeg, text/rtf, il buon vecchio text/htmle ogni sorta di fantasia.
E grazie all'API Clipboard, hai il controllo del tipo MIME e puoi persino memorizzare testo e immagini nella stessa operazione di scrittura.
E non è solo una singola operazione; è anche una singola voce negli appunti .
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',
}
),
}),
]);
![Che cos'è un elenco collegato, comunque? [Parte 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
