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"; { return <div> <h1>Example uses:</h1> <div> <h2>Example 1:</h2> <p>Convert absolute url to internal relative url</p> <InternalLink ="collection?id=abc123" ="http://example.com/collection/abc123" > <a ="u-textColorGreen">Visit collection abc123</a> </InternalLink> <div> <h3>The result of this example is:</h3> <a ="/collection/abc" ="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 ="collection?id=abc123" ="http://example.com:3100/collection/abc123?user=userA&show=true#div=pricing" ="u-textColorGreen" > <a ="u-textColorGreen">Visit collection abc123</a> </InternalLink> <div> <h3>The result of this example is:</h3> <a ="/collection/abc?user=userA&show=true#div=pricing" ="u-textColorGreen" > Visit collection abc123 </a> </div> </div> </div> ; }
Test
npm run test
License
MIT © Lwdthe1