JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 697
  • Score
    100M100P100Q119733F
  • License MIT

Package Exports

  • react-external-link

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-external-link) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Using npm: npm istall react-external-link --save

Using yarn: yarn add react-external-link

Usage

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

import React from 'react';
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 React from 'react';
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>