mailgo

mailgo

  • docs
  • demo
  • browser extensions
  • GitHub

›Installation

Installation

  • Installation
  • React / Angular / Vue / Hugo
  • Next.js
  • GatsbyJS
  • TypeScript
  • WordPress
  • Magento 2
  • Browsers support
  • Skypack

Usage with mailto

  • Usage for mailto
  • Cc, bcc, subject, body
  • Keyboard commands
  • Multiple email addresses

Usage with tel

  • Usage for tel
  • Telegram
  • WhatsApp
  • Skype

Configuration

  • Configuration
  • Dark mode

Examples

  • Examples with mailto links
  • Examples with tel links

Style and a11y

  • Style and Accessibility in mailgo
  • Responsive
  • No style

Advanced / Other

  • Direct render
  • Library export(s)
  • Window functions

i18n

  • i18n in mailgo
  • Contribute in mailgo i18n

Browsers extensions

  • Browsers extensions
  • Google Chrome
  • Firefox

By the community

  • Integrations
Edit

Mailgo in Next.js (and other SSR)

Mailgo is available also for Next.js and SSR

Next.js

Mailgo can be easily added to any Next.js project just modifying _app.js. You can check directly a repository of mailgo with Next.js (https://github.com/manzinello/next-mailgo) here the website deployed (thanks to Vercel): https://nextjs.mailgo.dev

import mailgo from "mailgo";

and simply add

useEffect(() => {
  mailgo();
}, []);

Here a complete example of a _app.js with a configuration (dark mode):

import { useEffect } from "react";

import "../styles/globals.css";

import mailgo from "mailgo";

const mailgoConfig = {
  dark: true,
};

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    mailgo(mailgoConfig);
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

Now mailgo is enabled in the entire web app!

Another running example (Next.js and also TypeScript) is my personal website: https://matteomanzinello.com

Other SSR

Install mailgo and then

import mailgo from "mailgo";

then you have to call mailgo(), IMPORTANT: do this when the object window is defined.

Here an example with React hooks:

useEffect(() => {
  mailgo();
}, []);

in this way you are sure that window is defined and mailgo will work correctly.

Another way (no hooks) is this:

componentDidMount() {
  mailgo();
}

You can pass to the function mailgo() also the configuration object.

BREAKING CHANGES from version 0.10.*: you can also use

const Mailgo = require("mailgo");

but then you have to call

Mailgo.start();

to start mailgo, here a complete example with Hooks:

const Mailgo = require("mailgo");

useEffect(() => {
  Mailgo.start();
}, []);

Mailgo can be installed in Gatsby through an official plugin: https://www.gatsbyjs.com/plugins/gatsby-plugin-mailgo/

Last updated on 11/30/2020 by Matteo Manzinello
← React / Angular / Vue / HugoGatsbyJS →
  • Next.js
  • Other SSR
mailgo
Docs
InstallationUsage (mailto:)Usage (tel:)ConfigurationExamplesStyle and Accessibilityi18n
Star
Examples
mailgo examplesmailgo Gatsby examplemailgo in create-react-appmailgo Next.js examplemailgo in Vue
More
mailgo Gatsby pluginmailgo WordPress pluginmailgo for Magento 2manzinello/mailgo on PackagistIntegrations by the community
GitHub repositories
mailgomailgo for WordPressmailgo for Magento 2mailgo for Gatsbymailgo Chrome extensionmailgo Firefox addonmailgo examplesmailgo.devmailgo in react-react-appmailgo in Next.jsmailgo in Gatsbymailgo in Vue
Browsers extensions
mailgo Chrome Extensionmailgo Firefox addon
Author
Contact mematteomanzinello.commanzinello.dev
Privacy
Privacy PolicyCookie Policy
mailgo is distributable under the terms of the MIT license, a project by matteo manzinello