2.4.0 • Published 7 months ago

react-external-link v2.4.0

Weekly downloads
465
License
MIT
Repository
github
Last release
7 months ago

React External Link

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

7 months ago

2.3.0

1 year ago

2.3.1

1 year ago

2.2.0

2 years ago

2.1.0

2 years ago

2.0.1

2 years ago

2.0.0

3 years ago

1.3.0

3 years ago

1.2.2

4 years ago

1.2.1

4 years ago

1.2.0

5 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago