npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kwooshung/nextjs-arcodesign-link

v2.0.7

Published

About In Next.js projects, the official recommendation is to use the Next.js Link component for navigation. However, integrating Arco Design's Link component within Next.js can be cumbersome. This component resolves this issue, offering full compatibility

Downloads

23

Readme

@kwooshung/nextjs-arcodesign-link

GitHub License GitHub Release Date - Published_At GitHub last commit GitHub code size in bytes GitHub top language GitHub pull requests GitHub issues Github Stars NPM Version Npm.js Downloads/Week Github CI/CD codecov Maintainability Gitee Repo

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

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

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' | string[] | ['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'] | | link | Custom link component, used to replace the default link component; for example, some internationalized components with routing functions will export dedicated Link | Link | - |

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 | - |