react-next-internal-link

react-next-internal-link

A helper component to easily create internal, relative links from absolute urls in your NextJS React apps.

Install

npm install --save react-next-internal-link

Usage

Import as "InternalLink" and use as illustrated in the examples below. See the tests for examples of more advanced usages.

import React, { Component } from "react";

import InternalLink from "react-next-internal-link";

class Example extends Component {
  render() {
    return (
      <div>
        <h1>Example uses:</h1>

        <div>
          <h2>Example 1:</h2>
          <p>Convert absolute url to internal, relative url</p>

          <InternalLink
            href="collection?id=abc123"
            as="http://example.com/collection/abc123"
          >
            <a className="u-textColorGreen">Visit collection abc123</a>
          </InternalLink>

          <div>
            <h3>The result of this example is:</h3>

            <a href="/collection/abc" className="u-textColorGreen">
              Visit collection abc123
            </a>
          </div>
        </div>

        <div>
          <h2>Example 2:</h2>
          <p>
            It still works with urls that have a port, query string, and/or hash
            fragment
          </p>

          <InternalLink
            href="collection?id=abc123"
            as="http://example.com:3100/collection/abc123?user=userA&show=true#div=pricing"
            className="u-textColorGreen"
          >
            <a className="u-textColorGreen">Visit collection abc123</a>
          </InternalLink>

          <div>
            <h3>The result of this example is:</h3>

            <a
              href="/collection/abc?user=userA&show=true#div=pricing"
              className="u-textColorGreen"
            >
              Visit collection abc123
            </a>
          </div>
        </div>
      </div>
    );
  }
}

Test

npm run test

License

By Lincoln W Daniel

MIT © Lwdthe1