Inform users when they visit external link
MIT License
If your website has a comment section, a hacker might post exploitive links there so that users might open the link thinking it is part of your website. You should inform the users that they are about to leave your website and step into an external page. This React hook lets you do it pretty quickly. You just have to plug it in your UI.
import { useExternalLink } from 'external-link-react';
function App() {
const { handleLinkOpen, handleConfirm } = useExternalLink(handleAskUser);
function handleAskUser() {
// we're using browser's native confirm but you can use your own UI.
const userResponse = window.confirm('This is an external link');
handleConfirm(userResponse);
}
return (
<div onClick={handleLinkOpen}>
<a href="https://google.com">Google (external)</a>
<a href="http://localhost:3000/">Our App (internal)</a>
</div>
);
}
npm i external-link-react
You can pass options to the useExternalLink React hook as a second argument. It has to be an object containing or more of these key-value pairs.
const options = {
newTab: false,
debug: false,
};
// inside component
const { handleLinkOpen, handleConfirm } = useExternalLink(handleAskUser, options);
newTab: true
. noopener
is set on the link so that your website remains secure against phishing attacks.debug: true
.