@emergy/components-contact
v1.0.8
Published
## Introduction
Downloads
5
Readme
components-navigation
Introduction
Create a basic and customizable contact form
Install
yarn add @emergy/components-contact
Usage
import * as React from "react";
import ContactForm from "../../components/ContactForm";
import { useTranslation } from "@emergy/components-translations";
const QUERY_CONTACT = gql`
mutation SendEmail($name: String!, $email: String!, $message: String!) {
sendEmail(name: $name, email: $email, message: $message)
}
`;
const Contact: React.FC = props => {
const { t } = useTranslation();
const [sendEmail] = useMutation(QUERY_CONTACT);
return (
<div>
<ContactForm t={t} sendEmail={sendEmail} />
</div>
);
};
export default Layout;
// Mutation GraphQL
async sendEmail(_root: any, params: any) {
if (
!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/is.test(
params.email
)
) {
return false
}
// Check if name is informed
if (!params.name) {
return false
}
// Check if message is informed
if (!params.message || params.message.length < 30) {
return false
}
// Send the email using sending
console.log("Sending...")
const message = `
<b>Name</b>: ${params.name}<br/>
<b>Email</b>: ${params.email}<br/><br/>
<b>Message</b>: ${params.message}
`
return await sendEmail({
to: 'email',
from: 'email',
subject: `[${conf.website.name}] - New message from contact form`,
text: message,
html: message,
})
},
Server side ()
import { sendEmail } from "@emergy/components-contact";
const sendOne = async (_root: any, params: any) => {
if (
!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/is.test(
params.email
)
) {
return false;
}
// Check if name is informed
if (!params.name) {
return false;
}
// Check if message is informed
if (!params.message || params.message.length < 30) {
return false;
}
// Send the email using sending
const message = `
<b>Name</b>: ${params.name}<br/>
<b>Email</b>: ${params.email}<br/><br/>
<b>Message</b>: ${params.message}
`;
return await sendEmail(
{
to: "to@email",
from: "from@email",
subject: `[${conf.website.name}] - New message from contact form`,
text: message,
html: message
},
params.token,
sgMail
);
};
Using module CSS
Scss:
// styles.scss
@import "../node_modules/@emergy/components-contact/dist/index.es.css";
Using PurgeCSS
const CpntNav = require("next-optimized-images");
const purgeCssWhiteList = [].concat(CpntNav.purgeCss); // To activate mobile headers
// next.config.js
const purgeCssPaths = [
"pages/**/*",
"components/**/*",
"node_modules/@emergy/components-contact/dist/**/*",
];
withPurgeCss({
purgeCssPaths,
purgeCss: {
whitelist: () => purgeCssWhiteList,
},
...
});
Test
Basic test are created and executed for each build.
The test with enzyme doesn't work properly yet.
More details
In order to make it work properly, I had to link the project who's using the components-translations to the components-navigation:
# In the root folder of my project
cd node_modules/@emergy/components-translation
yarn link
cd <components-navigation-root-path>
yarn link "@emergy/components-translations"
License
MIT © mlescaudron