Skip to content

muhajirdev/is-internal-link

Repository files navigation

is-internal-link

npm-badge GitHub issues GitHub license npm type definitions CircleCI Twitter

Installation

npm install --save is-internal-link

Usage

import { isInternalLink } from "is-internal-link";

or

import isInternalLink from "is-internal-link";
isInternalLink("https://www.google.com"); // false
isInternalLink("/page1"); // true

Test

npm run test

Why ?

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

How does it fit in my App?

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;

Contributors

Contributing

Please do not hesitate to submit an issue or pull request.

Question?

Submit an issue || ping me @muhajirframe on twitter

License

MIT

Enjoy

About

A utility to detect whether given link is internal link or external link

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published