# 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

Latest version **2.8.0** (published 2026-09-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-external-link
pnpm add react-external-link
yarn add react-external-link
bun add react-external-link
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.8.0 |
| Published | 2026-09-16 |
| First published | 2019-08-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 5 |
| Author | Alejandro Celaya |
| Maintainers | acelaya |
| Keywords | react, link, external, target, noopener, noreferrer |

## Links

- npm: https://www.npmjs.com/package/react-external-link
- Repository: https://github.com/acelaya/react-external-link
- Homepage: https://github.com/acelaya/react-external-link#readme
- Issues: https://github.com/acelaya/react-external-link/issues
- npm.io page: https://npm.io/package/react-external-link

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.8.0 (latest) — 2026-09-16
- 2.7.0 — 2026-05-12
- 2.6.1 — 2025-10-10
- 2.6.0 — 2025-08-12
- 2.5.0 — 2025-03-29
- 2.4.0 — 2024-12-06
- 2.3.1 — 2024-04-09
- 2.3.0 — 2024-04-09
- 2.2.0 — 2023-04-20
- 2.1.0 — 2023-02-19
- 2.0.1 — 2023-01-03
- 2.0.0 — 2022-05-12
- 1.3.0 — 2022-04-02
- 1.2.2 — 2021-07-07
- 1.2.1 — 2021-03-05
- … 4 more at https://npm.io/package/react-external-link/versions

## README

# 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.shields.io/codecov/c/gh/acelaya/react-external-link/main?style=flat-square)](https://app.codecov.io/gh/acelaya/react-external-link)
[![npm](https://img.shields.io/npm/v/react-external-link?style=flat-square)](https://www.npmjs.com/package/react-external-link)
[![npm downloads](https://img.shields.io/npm/dt/react-external-link?style=flat-square)](https://www.npmjs.com/package/react-external-link)
[![GitHub license](https://img.shields.io/github/license/acelaya/react-external-link.svg?style=flat-square)](https://github.com/acelaya/react-external-link/blob/master/LICENSE)
[![Paypal Donate](https://img.shields.io/badge/Donate-paypal-blue.svg?style=flat-square&logo=paypal&colorA=cccccc)](https://acel.me/donate)

This library provides a simple `ExternalLink` component for [react](https://es.reactjs.org/) 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:

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

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

export default MyComponent;
```

This will be rendered as:

```html
<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`:

```tsx
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:

```html
<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:

```tsx
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:

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

---
_Source: https://npm.io/package/react-external-link · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._