v1.0.0

@hwagfu/link

A button / link that auto-fetches the favicon and title of any URL.

A React component (built on HeroUI + Tailwind) that renders a button, link or standalone icon pointing to an external URL. It automatically pulls the site's favicon and Open Graph title via Microlink and Google Favicons.

Playground

Tweak the controls on the right to see the component update live.

typelabelurl

Installation

bash

npm install @hwagfu/link @heroui/react motion

tsx

import { JasonCode } from "@hwagfu/link";

Features

Auto-fetches the site favicon and OG title from a URL.
Three display types: button, link or icon.
Customizable with Tailwind via className / classNames.
Full UI control through a custom render function.

Usage

Default (Button)

tsx

import { JasonCode } from "@hwagfu/link";

export default function App() {
  return <JasonCode url="https://github.com" label="GitHub" />;
}

As a link

tsx

<JasonCode type="link" url="https://react.dev" label="React Docs" />

Icon (multiple sizes)

tsx

<div className="flex gap-2">
  <JasonCode type="icon" size="sm" url="https://google.com" />
  <JasonCode type="icon" size="md" url="https://google.com" />
  <JasonCode type="icon" size="lg" url="https://google.com" />
  <JasonCode type="icon" size="xl" url="https://google.com" />
</div>

Custom render

tsx

<JasonCode
  url="https://tailwindcss.com"
  render={({ title, favicon, isLoading }) =>
    isLoading ? (
      <span>Loading...</span>
    ) : (
      <div className="custom-card">
        <img src={favicon} alt="icon" width={24} />
        <h3>{title}</h3>
      </div>
    )
  }
/>

Props

Name	Type	Default	Description
url	string	"https://hwagfu.dev"	Destination URL to fetch meta info from and link to.
label	string	"Jason Code Space"	Fallback label shown before the OG title finishes loading.
type	"button" \| "link" \| "icon"	"button"	The visual display style of the component.
size	"sm" \| "md" \| "lg" \| "xl"	"md"	Only applies when type="icon". Controls the icon size.
className	string	""	Tailwind classes for the outer wrapper.
classNames	{ content?: string; image?: string }	{}	Granular styling for the text content and image slots.
render	(data) => ReactNode	—	Custom render function. data contains { title, favicon, url, isLoading }.