Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
stories
.babelrc
.gitignore
.travis.yml
CODE_OF_CONDUCT.md
LICENSE
OSSMETADATA
README.md
appveyor.yml
index.babel.js
index.spec.js
package.json

README.md

react-link-to-inbox react-link-to-inbox travis build status react-link-to-inbox appveyor build status react-link-to-inbox codecov status NetflixOSS Lifecycle

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='noreply@dougwade.io'
      tag='a'
      template='Open email to <%- email %> from <%- sender %> in <%- domain %>'
    />);
}

Documentation

See the examples in our storybook.

Code of Conduct

This project is governed by the Contributor Covenant v 1.4.1

License

This project uses the Apache 2.0 license.

You can’t perform that action at this time.