Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-external-link

1.1.1 • Public • Published

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>.

Install

npm i react-external-link

DownloadsWeekly Downloads

58

Version

1.1.1

License

MIT

Unpacked Size

11.8 kB

Total Files

8

Last publish

Collaborators

  • avatar