https://github.com/acelaya/react-external-link

Simple react component to generate links with target="_blank" and rel="noopener noreferrer"
https://github.com/acelaya/react-external-link

external noopener noreferrer react reactjs

Last synced: 12 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/acelaya/react-external-link
• Owner: acelaya
• License: mit
• Created: 2019-08-27T06:05:33.000Z (almost 7 years ago)
• Default Branch: main
• Last Pushed: 2025-06-28T07:51:18.000Z (12 months ago)
• Last Synced: 2025-06-28T08:32:36.608Z (12 months ago)
• Topics: external, noopener, noreferrer, react, reactjs
• Language: TypeScript
• Homepage:
• Size: 3.12 MB
• Stars: 6
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

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 = () => (

  


    

  

);


export default MyComponent;

```

This will be rendered as:

```html

https://example.com

```

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 = () => (

  


    

      Visit the site

    

  

);


export default MyComponent;

```

This will be rendered as:

```html



  Visit the site



```

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 = () => ;

export default MyComponent;

```

The result in this case will be:

```html

https://example.com

```