acelaya
React External Link
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 --saveUsage
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>