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

the-hotmann/react-external-link

 
 

Repository files navigation

React External Link

Build Status Code Coverage Scrutinizer Code Quality 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

Using npm: npm install 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>

It is also possible to pass any extra props, and they will be propagated to the link:

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 68.4%
  • JavaScript 27.9%
  • Shell 3.7%