react-link-to-inbox

A thin react wrapper around link-to-inbox

Installation

It's just an npm package

npm i -S react-link-to-inbox

Using yarn

yarn add react-link-to-inbox

Usage

Subject and Sender

If you provide the subject line and the sending email address of the confirmation email, then the link will contain url parameters that limit the inbox search to emails that match that sender and subject. This can prevent your users from becoming distracted by other emails in your inbox, and not clicking your confirmation link or returning to the page.

Tags

To make it easier to make link-to-inbox to style, it supports three html tag types: a, input and button, provided to the tag prop. Each one is a link that navigates to the sent email. This allows you to create semantic markup that properly reflects the importance of the link-to-inbox call to action.

Text Templating

The template prop takes a string that is a lodash template. The following keys are provided:

• name: the name of the email service (Gmail, Outlook) or the domain, if unknown
• protocol: the protocol of the generated link (e.g. https)
• domain: the domain of the email address (e.g. gmail.com)
• path: the rest of the link at href (e.g. href = protocol + '://' + domain + path)
• href: the link that is generated to the sent email
• subject, email and sender: the values provided to the props of the same name

This allows you to customize the anchor link text or button text, depending on what tag is provided.

Full example

import LinkToInbox, {styled} from 'react-link-to-inbox';

export default (email) => {
  return styled(<LinkToInbox
      email={email}
      subject='Confirm your account'
      sender='[email protected]'
      tag='a'
      template='Open email to <%- email %> from <%- sender %> in <%- domain %>'
    />);
}

Documentation

See the examples in our storybook.