Gatsbyではじめる
パッケージをインストールする
まず、アプリケーションを作成します。
ターミナルで次のコマンドのいずれかを実行します。
pnpm create gatsby -ts
Yamada UIは、@yamada-ui/react
をインストールするだけで、ほとんどのコンポーネントやフックを使用できます。
pnpm add @yamada-ui/react
テーブル・カレンダー・カルーセルなど使用する場合は、別途インストールをする必要があります。
pnpm add @yamada-ui/table
パッケージ | 説明 | |
---|---|---|
@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-markdownとreact-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>}
デフォルトのテーマは、UIProvider
のなかに含まれています。
テーマやコンフィグをカスタマイズしたい場合は、テーマをカスタマイズするとコンフィグをカスタマイズするをご覧ください。
コンポーネントを使用する
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 IndexPageexport const Head: HeadFC = () => <title>Home Page</title>
GitHubでこのページを編集する