Astro Sarkara

Section 7

フックを使う

Astro SarkaraではAstroコンポーネントだけではなくフックを用意しています。

よく使うフック

useLink(href, options)

リンクの種別を自動に判別し、ベースパスの自動的な付与と属性を取得するフック。

例えばサイト内リンクのとき、href="/posts/"、サイトのベースパスが/base-pathとすると、useLink(href)の返り値は{ href: "/base-path/posts/" }となる。 外部リンクの場合、href="https://panda-css.com/"とすると、useLink(href)の返り値は{ href: "https://panda-css.com/", target: "_blank", rel: "noreferrer noopener" }となる。

---
import type { HTMLAttributes } from "astro/types";
import { useLink } from "@cieloazul310/astro-sarkara";

type Props = HTMLAttributes<"a">;
const { href, ...props } = Astro.props;

const link = useLink(href);
/*
=> {
  href: string | URL | null;
  target?: "_blank";
  rel?: "noreferrer noopener";
}
*/
---

<a {...props} {...link}>
  <slot />
</a>
TypeScript
docs.astro.build

Section 7

フックを使う

Tutorial Top Top

Astro Sarkara