⬅️ Back to Table of Contents

📄 PackageLink.tsx

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	4
💠 JSX Elements	1
📐 Interfaces	1

📚 Table of Contents

• Imports
• JSX Elements
• Functions
• Interfaces

🛠️ File Location:

📂 packages/website/src/theme/MDXComponents/PackageLink.tsx

📦 Imports

Name	Source
packageData	@typescript-eslint/parser/package.json
Npm	@uiw/react-shields/npm
React	react
styles	./PackageLink.module.css

---

JSX Elements

Component	Type	Props	Children
Npm.Version	component	alt={npm: ${fullPackageName} v${version}}, anchor={{ target: '_blank' }}, className={styles.packageLink}, href={https://npmjs.com/${fullPackageName}}, packageName={packageName}, scope={scope}	none

---

Functions

`PackageLink({

packageName, scope, }: PackageLinkProps): React.JSX.Element`

Code

export function PackageLink({
  packageName,
  scope,
}: PackageLinkProps): React.JSX.Element {
  const fullPackageName = [scope, packageName].filter(Boolean).join('/');
  const { version } = packageData;

  return (
    <Npm.Version
      alt={`npm: ${fullPackageName} v${version}`}
      anchor={{ target: '_blank' }}
      className={styles.packageLink}
      href={`https://npmjs.com/${fullPackageName}`}
      packageName={packageName}
      scope={scope}
    />
  );
}

• Parameters:
• { packageName, scope, }: PackageLinkProps
• Return Type: React.JSX.Element
• Calls:
• [scope, packageName].filter(Boolean).join

---

Interfaces

PackageLinkProps

Interface Code

export interface PackageLinkProps {
  packageName: string;
  scope?: string;
}

Properties

Name	Type	Optional	Description
packageName	string	✗
scope	string	✓

---