Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

Honoではじめる

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

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

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

pnpm create hono
Copied!

必要なパッケージをインストールします。

pnpm add react react-dom
Copied!
pnpm add -D @types/react @types/react-dom @hono/vite-dev-server vite
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-markdownとreact-syntax-highlighterを使用した、便利なマークダウンコンポーネントを提供します。

@yamada-ui/fontawesome

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

セットアップ

index.tsをindex.tsxに変更して、内容も変更します。

index.tsx

import {
  ColorModeScript,
  ThemeSchemeScript,
  defaultConfig,
} from "@yamada-ui/react"
import { Hono } from "hono"
import { getCookie } from "hono/cookie"
import { renderToString } from "react-dom/server"


const app = new Hono()


app.get("*", (c) => {
  const colorMode = getCookie(c, "ui-color-mode")
  const themeScheme = getCookie(c, "ui-theme-scheme")


  return c.html(
    renderToString(
      <html lang="ja">
        <head>
          <script type="module" src="/src/client.tsx"></script>
        </head>


        <body>
          <ColorModeScript
            type="cookie"
            nonce="testing"
            initialColorMode={colorMode ?? defaultConfig.initialColorMode}
          />
          <ThemeSchemeScript
            type="cookie"
            nonce="testing"
            initialThemeScheme={themeScheme ?? defaultConfig.initialThemeScheme}
          />
          <div id="root"></div>
        </body>
      </html>,
    ),
  )
})


export default app
Copied!

package.jsonの内容を変更します。

package.json

{
  "type": "module",
  "scripts": {
    "dev": "vite"
  }
  // ...
}
Copied!

tsconfig.jsonの"jsxImportSource"を"react"にします。

tsconfig.json

{
  "compilerOptions": {
    "jsxImportSource": "react"
    // ...
  }
}
Copied!

vite.config.tsを追加します。

vite.config.ts

import devServer, { defaultOptions } from "@hono/vite-dev-server"
import { defineConfig } from "vite"


export default defineConfig(({ mode }) => {
  if (mode === "client") {
    return {
      build: {
        rollupOptions: {
          input: "./src/client.tsx",
          output: {
            entryFileNames: "static/client.js",
          },
        },
      },
    }
  } else {
    return {
      ssr: {
        external: ["react", "react-dom"],
      },
      plugins: [
        devServer({
          exclude: ["/*", ...defaultOptions.exclude],
          entry: "src/index.tsx",
        }),
      ],
    }
  }
})
Copied!

UIProviderを追加する

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

client.tsx

import { UIProvider } from "@yamada-ui/react"
import { createRoot } from "react-dom/client"
import App from "./app"


const domNode = document.getElementById("root")!
const root = createRoot(domNode)
root.render(
  <UIProvider>
    <App />
  </UIProvider>,
)
Copied!

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

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

app.tsx

import { FC } from "react"
import { Button } from "@yamada-ui/react"


const App: FC = () => {
  return <Button>Click me!</Button>
}


export default App
Copied!

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

前Gatsby次スタイルシステム