A utility to detect whether given link is internal link or external link
npm install --save is-internal-link
import { isInternalLink } from "is-internal-link";
or
import isInternalLink from "is-internal-link";
isInternalLink("https://www.google.com"); // false
isInternalLink("/page1"); // true
npm run test
I found my self doing this every time I started new project.
That’s why I decided to make this logic to abstract the logic and share it with the world
This is one example, if you’re using React. And just want to have a single component.
Instead of sometimes using <Link>
and sometimes using <a>
. Just create new Link
component and use it everywhere.
Another pattern I usually use. Usually I add target="_blank"
for external link.
So every external link will be opened in new tab
import React from "react";
import { Link as ReactRouterLink } from "react-router-dom";
import { isInternalLink } from "is-internal-link";
const Link = ({ children, to, activeClassName, ...other }) => {
if (isInternalLink(to)) {
return (
<ReactRouterLink to={to} activeClassName={activeClassName} {...other}>
{children}
</ReactRouterLink>
);
}
return (
<a href={to} target="_blank" {...other}>
{children}
</a>
);
};
export default Link;
Please do not hesitate to submit an issue or pull request.
Submit an issue || ping me @muhajirframe on twitter
MIT
Enjoy