#13 No-code 之旅 — 简单快速开发漂亮的 React 元件 ft. Chakra UI

今天来点不一样的！来讲一个我最近常用的 React UI component library，就是 Chakra UI～ 讲到 React，很多人会想到 Material UI (MUI)，或是单纯讲 CSS styling 的话，现在 Tailwind CSS 很红，那 Chakra UI 跟这两个 framework / library 有什麽不同呢？

简介

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 元件做开发了喔～

小结

大家本来就知道 Chakra UI 吗？觉得如何呢？个人觉得真的好用！因为他提供蛮多元件可以直接拿来用，而且还有像 Tailwind CSS 的那种 styling 方式，让客制化变得简单一些～ 还有是因为他符合 a11y 的原则，让网站比较友善！

大家想要看看之前的网站可以看这里，或是直接到首页～ 不过这专案不是用 Chakra UI 开发出来的喔。

祝大家明天上班上课愉快！

Live Demo

晚安 <3

看更多

• Chakra UI
• Material UI (MUI)
• Tailwind CSS
• #10 实作篇 — 使用 SWR 抓取和 Cache 资料
• #11 No-code 之旅 — 在 Next.js 专案中显示 Notion 的资料 ft. Notion SDK
• #12 No-code 之旅 — 在 Next.js 专案中显示 RSS 的资料 ft. RSS Parser