ทำความรู้จักกับ Chakra UI
หลายคนคงจะไม่คุ้นหูกับ Component Library ชื่อ Chakra UI (จักระ – มาจากพลังจักระในการ์ตูนนารูโตะ) เป็นไลบรารี่ที่สามารถใช้งานกับ React ได้ด้วย ซึ่งถูกพัฒนาโดย Segun Adebayo ชาวไนจีเรีย (ผมเองได้ติดตาม Chakra UI มาตั้งแต่เป็น beta และตอนนี้เวอร์ชัน 1.6.3 แล้ว และยังได้รับการพัฒนาต่อยอดไปอีกเรื่อยๆ นับว่าเป็นไลบรารี่ที่น่าสนใจมากอีกตัวนึง)
Chakra UI น่าสนใจที่การกำหนดสไตล์ให้คอมโพเนนท์ไม่จำเป็นต้องใช้ css เพราะว่าตัวไลบรารี่ Chakra UI ได้ทำการแมป property ของคอมโพเนนท์เข้ากับ css style เรียบร้อยแล้ว ทำให้เราใช้งานการกำหนดสไตล์ได้ง่ายยิ่งขึ้นกว่าเดิม จนลืมวิธีใช้ css ไปเลย
appcodemia
Chakra UI บนเว็บไซต์ GitHub (https://github.com/chakra-ui/chakra-ui) ได้รับคะแนนดาวถึง 18.4K (30/5/2021) จำนวนการดาวน์โหลด 250K ต่อเดือน
Chakra UI บนเว็บไซต์ Best of JS (https://bestofjs.org/projects?tags=component) ได้อันดับที่ 9 นับจากจำนวนดาวของ GitHub ซึ่งอันดับ 1 คือ Ant Design อันดับ 2 คือ Material UI
library ที่สำคัญของ Chakra UI คือ emotion ซึ่งใช้ช่วยในเรื่องของการกำหนดสไตล์แบบ css ซึ่งสามารถเขียนลงในคอมโพเนนท์ jsx ได้เลย และ framer-motion ช่วยเรื่องของแอนิเมชัน นั้นเอง
การติดตั้ง Chakra UI
เกริ่นนำมาพอสมควร มาถึงส่วนการติดตั้ง Chakra UI วิธีการติดตั้งขอเสนอ 2 วิธี
วิธีที่ 1 การติดตั้ง Chakra UI ที่ใช้กับโปรเจคเก่า
# using npm
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
# using yarn
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
การติดตั้งให้เลือกใช้อย่างใดอย่างหนึ่ง npm หรือ yarn
วิธีการนี้จำเป็นต้องสร้างและกำหนด Context Provider ของ Chakra UI ครอบ Component ที่จะใช้ไลบรารี่นี้
ตัวอย่างจะใช้วิธีการนำไปครอบ component ที่ถูกเรียกใช้จาก App เท่านี้ component อื่นๆ ที่อยู่ใน App ก็จะสามารถใช้งาน Chakra UI ได้ทั้งหมด
import * as React from "react"
// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/react"
function App({ Component }) {
// 2. Use at the root of your app
return (
<ChakraProvider>
<Component />
</ChakraProvider>
)
}
ไลบรารี่ที่ติดตั้งมาให้ในไฟล์ package.json
"dependencies": {
"@chakra-ui/react": "^1.6.3",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@testing-library/jest-dom": "^5.9.0",
"@testing-library/react": "^10.2.1",
"@testing-library/user-event": "^12.0.2",
"framer-motion": "^4.1.17",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^3.0.0",
"react-scripts": "4.0.3",
"web-vitals": "^0.2.2"
},
ก่อนจะไปถึงวิธีที่ 2 จะขอแนะนำจุดเด่นของ Chakra UI อีกอย่างหนึ่งคือ มีการจัดการ theme ที่ง่าย เหมือน Material UI และสามารถจัดการ theme แบบ Dark mode ได้ด้วย (จะเสนอตัวอย่างในหัวข้อถัดไป)
วิธีที่ 2 การติดตั้ง Chakra UI ที่ใช้กับโปรเจคใหม่
สำหรับโปรเจคที่สร้างใหม่ แนะนำให้สร้างโปรเจคจาก create-react-app (cra) โดยใช้ theme ของ chakra ui จะสะดวกและมีโค้ดตัวอย่างให้พร้อม ดังนี้
คำสั่งติดตั้งสามารถใช้ได้ทั้ง npm และ yarn และสามารถเลือก ภาษาได้ด้วยทั้ง javascript และ typescript
# using npm
npx create-react-app my-app --template [template-name]
# using yarn
yarn create react-app my-app --template [template-name]
npx เป็นคำสั่งที่ใช้สำหรับ execute npm package binaries โดยที่ไม่จำเป็นต้องดาวน์โหลด package (npx จะถูกติดตั้งมาพร้อมกับ npm หากไม่สามารถใช้คำสั่ง npx ได้ ให้อัพเดท npm ก่อน หรือหากใช้ node.js เวอร์ชันเก่ามาก ก็ให้อัพเดท node.js เป็นเวอร์ชันใหม่ จะได้ npm เวอร์ชันใหม่มาด้วย)
ตัวอย่างเช่น เราจะสร้างโปรเจคชื่อ my-app สามารถเลือกใช้คำสั่ง อย่างใดอย่างหนึ่งจากตัวอย่างด้านล่างนี้
# JavaScript using npm
npx create-react-app my-app --template @chakra-ui
# JavaScript using yarn
yarn create react-app my-app --template @chakra-ui
# TypeScript using npm
npx create-react-app my-app --template @chakra-ui/typescript
# TypeScript using yarn
yarn create react-app my-app --template @chakra-ui/typescript
เมื่อติดตั้งเสร็จเรียบร้อยแล้ว ดูไลบรารี่ที่ติดตั้งมาให้ตอนเริ่มต้นที่ไฟล์ package.json จะพบว่าเวอร์ชันในแพ็คเกจจะไม่อัพเดทเท่ากับวิธีการติดตั้งแบบที่ 1
"dependencies": {
"@chakra-ui/react": "^1.0.0",
"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.0.0",
"@testing-library/jest-dom": "^5.9.0",
"@testing-library/react": "^10.2.1",
"@testing-library/user-event": "^12.0.2",
"framer-motion": "^4.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^3.0.0",
"react-scripts": "4.0.3",
"web-vitals": "^0.2.2"
},
กดรันโปรเจคด้วย npm start หรือ yarn start ได้เลย


จุดน่าสนใจของ ตัวอย่างโค้ดที่ติดตั้งมากับ cra + chakra ui นี่คือ การมีการตั้งค่า theme ให้รองรับการสลับโหมดระหว่าง โหมดปกติ กับ dark mode นั้นเอง สามารถลองคลิกสลับโหมดที่ปุ่มพระอาทิตย์/ดวงจันทร์ ด้านมุนบนขวา
รีวิวโค้ดเริ่มต้นที่ให้มาใน cra + chakra ui
ในโฟลเดอร์ src มีไฟล์หลักที่น่าสนใจได้แก่ ไฟล์ index.js, App.js, ColorModeSwitcher.js, Logo.js
จะสังเกตเห็นว่า โค้ดเริ่มต้นนี้จะไม่มีไฟล์ .css มาให้เลย เพราะไม่จำเป็นต้องใช้ใน chakra ui
import { ColorModeScript } from '@chakra-ui/react';
import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<StrictMode>
<ColorModeScript />
<App />
</StrictMode>,
document.getElementById('root')
);
จุดที่น่าสนใจ
- การเรียกใช้งาน ColorModeScript เป็นคอมโพเนนท์ที่ใช้กำหนดค่าการเปลี่ยนแปลงของ theme mode ซึ่งจะเก็บค่าไว้ใน local storage และจะต้องประกาศใช้งาน ColorModeScript ก่อน component body อื่นๆ
ศึกษาเพิ่มเติม https://chakra-ui.com/docs/features/color-mode#adding-the-colormodescript
import React from 'react';
import {
ChakraProvider,
Box,
Text,
Link,
VStack,
Code,
Grid,
theme,
} from '@chakra-ui/react';
import { ColorModeSwitcher } from './ColorModeSwitcher';
import { Logo } from './Logo';
function App() {
return (
<ChakraProvider theme={theme}>
<Box textAlign="center" fontSize="xl">
<Grid minH="100vh" p={3}>
<ColorModeSwitcher justifySelf="flex-end" />
<VStack spacing={8}>
<Logo h="40vmin" pointerEvents="none" />
<Text>
Edit <Code fontSize="xl">src/App.js</Code> and save to reload.
</Text>
<Link
color="teal.500"
href="https://chakra-ui.com"
fontSize="2xl"
target="_blank"
rel="noopener noreferrer"
>
Learn Chakra
</Link>
</VStack>
</Grid>
</Box>
</ChakraProvider>
);
}
export default App;
จุดที่น่าสนใจ
- บรรทัดที่ 17 – ChakraProvider เป็น context provider ที่ใช้สำหรับแชร์ค่าที่กำหนดไว้ใน Theme และ การใช้งาน component อื่นๆใน Chakra UI การใช้งาน Chakra UI จำเป็นต้องกำหนด ChakraProvider ด้วยทุกครั้ง
- บรรทัดที่ 20 – การเรียกใช้งานคอมโพเนนท์ ColorModeSwitcher เป็นปุ่มที่ทำให้ผู้ใช้งานสามารถกดเพื่อสลับโหมดของ Theme ได้
- บรรทัดที่ 22 – การเรียกใช้งานคอมโพเนนท์ Logo เป็นไอคอน Chakra UI ที่หมุนได้ โดยการบังคับให้รูปมีแอนิเมชันใน Chakra UI นั้นทำได้ไม่อยาก
- การกำหนดค่า css ด้วย property ของคอมโพเนนท์ เช่น textAlign, minH, fontSize, color
import React from 'react';
import { useColorMode, useColorModeValue, IconButton } from '@chakra-ui/react';
import { FaMoon, FaSun } from 'react-icons/fa';
export const ColorModeSwitcher = props => {
const { toggleColorMode } = useColorMode();
const text = useColorModeValue('dark', 'light');
const SwitchIcon = useColorModeValue(FaMoon, FaSun);
return (
<IconButton
size="md"
fontSize="lg"
aria-label={`Switch to ${text} mode`}
variant="ghost"
color="current"
marginLeft="2"
onClick={toggleColorMode}
icon={<SwitchIcon />}
{...props}
/>
);
};
จุดที่น่าสนใจ
ในคอมโพเนนท์ ColorModeSwitcher นี้ได้เรียกใช้ hooks จาก Chakra UI อยู่ 2 ฟังก์ชัน คือ
- useColorMode ใช้สำหรับสลับโหมด dark/light mode ซึ่งจะนำฟังก์ชัน toggleColorMode มาใช้ในโค้ดส่วน Click Event ของปุ่ม
- useColorModeValue ใช้สำหรับการกำหนดให้ออฟเจ็คเพื่อแสดงผลตามที่เราต้องการเมื่ออยู่ในแต่ละโหมด ซึ่งพารามิเตอร์มี 2 ตัวคือ ผลลัพธ์ในโหมด dark และ โหมด light
- การกำหนดสไตล์ของ IconButton จะให้การกำหนดค่าผ่าน parameter ได้แก่ size, fontSize, aria-label, color, marginLeft ซึ่งไม่จำเป็นต้องกำหนดค่าด้วย css
import React from 'react';
import { Image, keyframes, usePrefersReducedMotion } from '@chakra-ui/react';
import logo from './logo.svg';
const spin = keyframes`
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
`;
export const Logo = props => {
const prefersReducedMotion = usePrefersReducedMotion();
const animation = prefersReducedMotion
? undefined
: `${spin} infinite 20s linear`;
return <Image animation={animation} src={logo} {...props} />;
};
จุดที่น่าสนใจ
ในคอมโพเนนท์ Logo ได้เรียกใช้ hooks จาก Chakra UI เพื่อใช้ในการกำหนดแอนิเมชันในกับรูปภาพ hooks ที่ใช้คือ usePrefersReducedMotion การกำหนดค่าแอนิเมชัน
ค่าผลลัพธ์ที่ได้จาก usePrefersReducedMotion คือการรองรับ window.matchMedia ของเบราเซอร์นั้น ถ้ารองรับจะรีเทิร์น false
การเขียนกำหนดการทำแอนิเมชัน เป็นแบบ css style ศึกษาเพิ่มเติม
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
- https://www.w3schools.com/css/css3_animations.asp
บทส่งท้าย
จากที่ส่วนตัวได้ลองใช้งาน Chakra UI มาแล้ว คิดว่าไลบรารี่ตัวนี้ เป็นอีกตัวที่สามารถทำให้เราสร้างหน้าเว็บได้อย่างรวดเร็ว เพราะการจัดการเลเอาท์ที่ง่าย มีคอมโนเนนท์ให้เลือกใช้พอสมควร และยังมีตัวอย่างชุดคอมโพเนนท์ที่ออกแบบไว้แล้วในเว็บ https://pro.chakra-ui.com/components สุดท้ายก็ก้อปวางอย่างเดียว และตอนนี้ผู้พัฒนาก็ยังพัฒนาไลบรารี่ตัวนี้อย่างต่อเนื่องมีฟังก์ชัน คอมโพเนนท์ใหม่ๆ มาให้ใช้ แต่อย่างไรก็ตามถ้าจะหวังว่าความครบถ้วนของคอมโพเนนท์แล้วหละก็ คงต้องทำใจ เพราะว่าไลบรารี่นี้พึ่งสร้างมาได้ไม่นานคงต้องรออีกสักพักนะครับ สุดท้ายนี้หากใครสนใจลองเปลี่ยนมาลอง Chakra UI ก็สามารถเริ่มต้นไปด้วยกันได้เลยนะครับ 🙂
อ้างอิง
- Chakra UI : https://chakra-ui.com/
- github : https://github.com/chakra-ui/chakra-ui
- วิธีติดตั้ง : https://chakra-ui.com/docs/getting-started
- วิธีติดตั้งร่วมกับ cra : https://chakra-ui.com/guides/integrations/with-cra