Skip to content

Simple react component to generate links with target="_blank" and rel="noopener noreferrer"

License

Notifications You must be signed in to change notification settings

acelaya/react-external-link

Folders and files

NameName
Last commit message
Last commit date
Oct 26, 2024
Apr 20, 2023
Oct 22, 2024
Oct 26, 2024
Dec 6, 2024
Dec 19, 2020
Feb 19, 2023
Oct 26, 2024
Jun 20, 2024
Nov 17, 2023
Feb 15, 2025
Feb 15, 2025
Aug 15, 2023
Jan 18, 2025

Repository files navigation

React External Link

Build Status Code Coverage npm npm downloads GitHub license Paypal Donate

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>