🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-external-link

Package Overview
Dependencies
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-external-link

[![Build Status](https://img.shields.io/github/actions/workflow/status/acelaya/react-external-link/ci.yml?branch=main&logo=github&style=flat-square)](https://github.com/acelaya/react-external-link/actions/workflows/ci.yml) [![Code Coverage](https://img.sh

2.5.0
latest
Source
npm
Version published
Weekly downloads
948
-11.9%
Maintainers
1
Weekly downloads
 
Created
Source

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>

Keywords

react

FAQs

Package last updated on 29 Mar 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts