React External Link

This library provides a simple ExternalLink component for react which can be used to render a tags with both target="_blank" and rel="noopener noreferrer" attributes.

Installation

npm install react-external-link --save

Usage

If you just need a simple link with no custom text:

import { ExternalLink } from 'react-external-link';

const MyComponent = () => (
  <div>
    <ExternalLink href="https://example.com" />
  </div>
);

export default MyComponent;

This will be rendered as:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">https://example.com</a>

If you need to provide a custom content, you can do so by providing the ExternalLink's children:

import { ExternalLink } from 'react-external-link';

const MyComponent = () => (
  <div>
    <ExternalLink href="https://example.com">
      <span>Visit the site</span>
    </ExternalLink>
  </div>
);

export default MyComponent;

This will be rendered as:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  <span>Visit the site</span>
</a>

It is also possible to pass any extra props, and they will be propagated to the link:

import { ExternalLink } from 'react-external-link';

const MyComponent = () => <ExternalLink href="https://example.com" className="my-class" />;

export default MyComponent;

The result in this case will be:

<a href="https://example.com" target="_blank" rel="noopener noreferrer" class="my-class">https://example.com</a>