Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

Gatsbyではじめる

パッケージをインストールする

まず、アプリケーションを作成します。

ターミナルで次のコマンドのいずれかを実行します。

pnpm create gatsby -ts
Copied!

Yamada UIは、@yamada-ui/reactをインストールするだけで、ほとんどのコンポーネントやフックを使用できます。

pnpm add @yamada-ui/react
Copied!

テーブル・カレンダー・カルーセルなど使用する場合は、別途インストールをする必要があります。

pnpm add @yamada-ui/table
Copied!
パッケージ説明
@yamada-ui/table

@tanstack/react-tableを使用した、便利なテーブルコンポーネントを提供します。

@yamada-ui/calendar

dayjsを使用した、便利なカレンダーとデイトピッカーコンポーネントを提供します。

@yamada-ui/carousel

embla-carousel-reactを使用した、便利なカルーセルコンポーネントを提供します。

@yamada-ui/dropzone

react-dropzoneを使用した、便利なドロップゾーンコンポーネントを提供します。

@yamada-ui/charts

rechartsを使用した、便利なチャートコンポーネントを提供します。

@yamada-ui/markdown

react-markdownreact-syntax-highlighterを使用した、便利なマークダウンコンポーネントを提供します。

@yamada-ui/fontawesome

Font Awesomeを便利に使用するためのコンポーネントを提供します。

UIProviderを追加する

Yamada UIをインストール後、gatsby-browser.tsxを作成して、UIProviderを追加します。

gatsby-browser.tsx

import * as React from "react"
import type { GatsbyBrowser } from "gatsby"
import { UIProvider } from "@yamada-ui/react"
export const wrapPageElement: GatsbyBrowser["wrapPageElement"] = ({
element,
}) => {
return <UIProvider>{element}</UIProvider>
}
Copied!

コンポーネントを使用する

UIProviderを追加したら、アプリケーション内でコンポーネントを呼び出します。

index.tsx

import * as React from "react"
import { Button } from "@yamada-ui/react"
import type { HeadFC, PageProps } from "gatsby"
const IndexPage: React.FC<PageProps> = () => {
return <Button>Click me!</Button>
}
export default IndexPage
export const Head: HeadFC = () => <title>Home Page</title>
Copied!

GitHubでこのページを編集する

RemixHono