Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

Viteではじめる

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

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

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

pnpm create vite my-app --template react-swc-ts
Copied!

cdコマンドでディレクトリを移動してnode_modulesをインストールします。

pnpm install
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/markdown

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

@yamada-ui/charts

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

@yamada-ui/fontawesome

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

UIProviderを追加する

Yamada UIをインストール後、UIProviderを追加します。

main.tsx

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App.tsx"
import "./index.css"
import { UIProvider } from "@yamada-ui/react"


ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <UIProvider>
      <App />
    </UIProvider>
  </React.StrictMode>,
)
Copied!

カラーモードに対応する

カラーモードを正常に動作させるために、body内にColorModeScriptを追加する必要があります。

理由は、カラーモードがlocalStorageやcookiesを用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。

プラグインを追加する

body内にスクリプトを追加するためのプラグインをvite.config.tsに追加します。

vite.config.ts

import { defineConfig, Plugin } from "vite"
import { defaultConfig, getColorModeScript } from "@yamada-ui/react"
import react from "@vitejs/plugin-react-swc"


function injectScript(): Plugin {
  return {
    name: "vite-plugin-inject-scripts",
    transformIndexHtml(html, ctx) {
      const content = getColorModeScript({
        initialColorMode: defaultConfig.initialColorMode,
      })


      return html.replace("<body>", `<body><script>${content}</script>`)
    },
  }
}


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), injectScript()],
})
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でこのページを編集する

前Next.js次Remix