#13 No-code 之旅 — 簡單快速開發漂亮的 React 元件 ft. Chakra UI - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 13

Modern Web

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 13 篇

#13 No-code 之旅 — 簡單快速開發漂亮的 React 元件 ft. Chakra UI

13th鐵人賽 javascript react nextjs chakraui

Jade

2021-09-28 22:47:55

6530 瀏覽

分享至

今天來點不一樣的！來講一個我最近常用的 React UI component library，就是 Chakra UI～講到 React，很多人會想到 Material UI (MUI)，或是單純講 CSS styling 的話，現在 Tailwind CSS 很紅，那 Chakra UI 跟這兩個 framework / library 有什麼不同呢？

Chakra UI

簡介

Chakra UI 是一個 React 的 UI component library，重點是他很簡單也好用！怎麼說？他的元件都符合 WAI-ARIA 標準 (accessible)，也提供客製化 (themeable)，還有因為模組化所以可以簡單地做出新元件 (composable)！雖然比較不有名，可是最近真的常常看到用到 Chakra UI 的專案呢～

與 Tailwind CSS 的不同

一個是 CSS 框架，另一個是 React UI component library，所以其實差蠻多的。Tailwind CSS 主要就是做 styling，也是因為他是 CSS 框架，所以可以跟不同的前端框架搭配起來。而 Chakra UI 是 UI 庫，它提供了很多 React 的元件，可是！ Chakra UI 也提供 Tailwind-like (類似 Tailwind) 的 styling 功能～

// Chakra UI
<Text mt={2} fontSize="xl" fontWeight="semibold">
  Modern, Chic Penthouse with Mountain, City & Sea Views
</Text>

Text 為 text 元件，這元件有很多 styling 相關的 props，例如 mt 代表 marginTop，或是字體相關的 props 像是 fontSize 和 fontWeight。

// Tailwind CSS
<p class="mt-2 text-xl font-semibold">
  Modern, Chic Penthouse with Mountain, City & Sea Views
</p>

上面是 Tailwind CSS 的寫法，是不是長得很像呢？寫起來就是一個是 React 元件的 props，而另一個是寫成元件的 classnames ～

與 Material UI (MUI) 的不同

Material UI (MUI) 跟 Chakra UI 一樣是 React 的 UI component library，兩個都提供很多 React 元件。不過 MUI 有一個特點，讓很多人會選擇用 MUI 的其中一個原因，就是基於 Material Design guidelines。如果我們拿 CSS 框架來比喻的話，MUI 像是 Bootstrap，而 Chakra UI 像是 Tailwind CSS。當然 MUI 也提供客製化的功能，不過因為元件本身都有一定的風格，所以想要做一些調整的時候會比較麻煩一點。不過 MUI 提供更多的元件～

Chakra UI 的 Hooks

對，沒錯！Chakra UI 還提供 React hooks！這些 hooks 都是 utility functions，讓我們實作元件的過程簡單一些～像這 useDisclosure hook (docs)，當我們想要做一個小視窗，點某個按鈕的時候把小視窗打開，點小視窗外的地方或是裡面的關閉按鈕，會把小視窗關起來，我們可以用這 custom hook。

const { isOpen, onOpen, onClose, onToggle } = useDisclosure();

useDisclosure hook 回傳四個東西，不過我平常只會用三個：

isOpen：如果視窗是開著的狀態，isOpen 為 true
onOpen：我們可以把某個按鈕的 onClick event handler 設成 onClick={onOpen}，讓使用者每次點到按鈕，小視窗會立即打開～
onClose：跟 onOpen 相反，這 function 會把 isOpen 設成 false

Chakra UI 還提供其他的 custom hooks，像 useClipboard (docs)，useBreakpointValue (docs)，等等有用的 hooks 喔～

Setup

Chakra UI 本身有用到一些 library，所以安裝的時候還需要裝其他的 library 否則程式碼跑不動：

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
# or
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Emotion 是 CSS-in-JS library，Framer Motion 是 animation library，而 Chakra UI 的元件都有用到這兩個 library，所以都要裝喔～

再來是，我們需要在專案的 root component 把 ChakraProvider import 進來，讓所有元件可以拿到 theme 相關的資料，不過在 Next.js 專案裡我們需要放在 pages/_app.js 裡：

// pages/_app.js
import { ChakraProvider } from "@chakra-ui/react"

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

豪！可以開始使用 Chakra UI 所提供的 React 元件做開發了喔～