@kwooshung/nextjs-arcodesign-link

English | 中文

Why Develop It?

In Next.js projects, it's officially recommended to use the Next.js Link component for navigation. However, integrating the Arco Design Link component in Next.js can be cumbersome. This component resolves this issue by offering full compatibility with the properties of both frameworks, thereby simplifying integration for developers.

What Pain Points Does It Solve?

• Integrating the Arco Design Link component into a Next.js project can be a hassle due to compatibility issues.
• This component addresses these problems by offering full compatibility with the attributes of both frameworks, simplifying integration for developers.
• It provides all the properties of the Arco Design Link component, as well as all the properties of the Next.js Link component, making it more convenient to use in both frameworks.

Why Use It?

• Supports automatic determination of whether the domain name belongs to one's own rel='noopener noreferrer' to prevent window.opener attacks and improve security;
• Support setting the global link whitelist through the 'LinkProvider' component, and automatically determine whether rel='noopener noreferrer' needs to be added;
• Easy to use, simple operation, low learning curve, and high flexibility.
• Implemented with modern ES6 features.
• Written in TypeScript for type safety.
• Supports on-demand import, esm modularization, naturally supports tree-shaking, so no worries about the size of the package after bundling.
• Also provides a commonjs version in cjs format.
• Test coverage of 100%.

Demo

• CodeSandbox

Installation

npm

npm install @kwooshung/nextjs-arcodesign-link

yarn

yarn add @kwooshung/nextjs-arcodesign-link

pnpm

pnpm add @kwooshung/nextjs-arcodesign-link

Usage

import { Link } from '@kwooshung/nextjs-arcodesign-link';

const App = () => {
  return (
    <LinkProvider>
      <Link href='#' status='error'>
        Error Link
      </Link>
      <Link href='#' status='error' disabled>
        Error Link
      </Link>
      <Link href='#' status='success'>
        Success Link
      </Link>
      <Link href='#' status='success' disabled>
        Success Link
      </Link>
      <Link href='#' status='warning'>
        Warning Link
      </Link>
      <Link href='#' status='warning' disabled>
        Warning Link
      </Link>
    </LinkProvider>
  );
};

export default App;

API

• NextJs App Router
• Arco Design Link

LinkProvider

Link

The link component combines all the properties of the Link component of NextJs and the Link component of Arco Design.

LinkProvider Props

Property	Description	Type	DefaultValue
whitelist	Global link whitelist, automatically determines whether to add rel='noopener noreferrer'	['zhidi.vip', 'wozhidi.vip', 'wozhidi.com', 'google.com', 'bing.com', 'baidu.com', 'yandex.ru', 'duckduckgo.com', 'yahoo.com', 'facebook.com', 'twitter.com', 'instagram.com', 'linkedin.com', 'weibo.com', 'zhihu.com', 'mp.weixin.qq.com', 'tiktok.com', 'douyin.com', 'pinterest.com', 'reddit.com', 'snapchat.com', 'telegram.org', 'vk.com']	-

ArcoDesign Link Props

Property	Description	Type	DefaultValue	Version
disabled	Whether to disable	boolean	-	-
hoverable	Whether to hide background when hover	boolean	true	2.23.0
status	The status of Link	'error' | 'success' | 'warning'	-	-
className	Additional css class	string | string[]	-	-
icon	Custom Icon, Display the default icon when set to true.	ReactNode | boolean	-	-
style	Additional style	CSSProperties	-	-

NextJs Link Props

Property	Description	Type	DefaultValue
href	The path or URL to navigate to. It can also be an object.	string | UrlObject	-
as	Optional decorator for the path that will be shown in the browser URL bar. Before Next.js 9.5.3 this was used for dynamic routes, check our previous docs to see how it worked. Note: when this path differs from the one provided in href the previous href/as behavior is used as shown in the previous docs.	string | UrlObject	-
replace	Replace the current history state instead of adding a new url into the stack.	boolean	false
scroll	Whether to override the default scroll behavior	boolean	true
shallow	Update the path of the current page without rerunning getStaticProps, getServerSideProps or getInitialProps.	boolean	false
passHref	Forces Link to send the href property to its child.	boolean	false
prefetch	The active locale is automatically prepended. locale allows for providing a different locale. When false href has to include the locale as the default behavior is disabled.	boolean	true
locale	Enable legacy link behavior.	string | false	-
legacyBehavior	Enable legacy link behavior.	boolean	false
onMouseEnter	Optional event handler for when the mouse pointer is moved onto Link	React.MouseEventHandler	-
onTouchStart	Optional event handler for when Link is touched	React.TouchEventHandler	-
onClick	Optional event handler for when Link is clicked	React.MouseEventHandler	-