v1.0.0

@hwagfu/link

Nút / liên kết tự lấy favicon và tiêu đề từ bất kỳ URL nào.

Component React (dựng trên HeroUI + Tailwind) hiển thị nút, liên kết hoặc icon trỏ tới URL bên ngoài. Nó tự động lấy favicon và tiêu đề Open Graph của trang qua Microlink và Google Favicons.

Playground

Chỉnh các thông số bên phải để xem component thay đổi trực tiếp.

typelabelurl

Cài đặt

bash

npm install @hwagfu/link @heroui/react motion

tsx

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

Tính năng

Tự động lấy favicon và tiêu đề (OG) từ URL.
Ba kiểu hiển thị: button, link hoặc icon.
Tùy biến bằng Tailwind qua className / classNames.
Toàn quyền kiểm soát giao diện bằng hàm render.

Cách dùng

Mặc định (Button)

tsx

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

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

Dạng Link

tsx

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

Dạng Icon (nhiều size)

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>
    )
  }
/>

Thuộc tính (Props)

Tên	Kiểu	Mặc định	Mô tả
url	string	"https://hwagfu.dev"	URL đích để lấy meta và trỏ tới.
label	string	"Jason Code Space"	Nhãn dự phòng hiển thị trước khi tải xong tiêu đề OG.
type	"button" \| "link" \| "icon"	"button"	Kiểu hiển thị của component.
size	"sm" \| "md" \| "lg" \| "xl"	"md"	Chỉ áp dụng khi type="icon". Điều chỉnh kích thước icon.
className	string	""	Class Tailwind cho lớp bọc ngoài.
classNames	{ content?: string; image?: string }	{}	Style riêng cho phần nội dung và ảnh.
render	(data) => ReactNode	—	Hàm render tùy chỉnh. data gồm { title, favicon, url, isLoading }.