Menu Close

React : การติดตั้ง Chakra UI

ทำความรู้จักกับ 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 ได้เลย

http://demo1.appcodemia.com/

ตัวอย่างหน้าเว็บที่ติดตั้ง cra + chakra ui เมื่อรันโปรแกรมครั้งแรก

จุดน่าสนใจของ ตัวอย่างโค้ดที่ติดตั้งมากับ 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 ศึกษาเพิ่มเติม

บทส่งท้าย

จากที่ส่วนตัวได้ลองใช้งาน Chakra UI มาแล้ว คิดว่าไลบรารี่ตัวนี้ เป็นอีกตัวที่สามารถทำให้เราสร้างหน้าเว็บได้อย่างรวดเร็ว เพราะการจัดการเลเอาท์ที่ง่าย มีคอมโนเนนท์ให้เลือกใช้พอสมควร และยังมีตัวอย่างชุดคอมโพเนนท์ที่ออกแบบไว้แล้วในเว็บ https://pro.chakra-ui.com/components สุดท้ายก็ก้อปวางอย่างเดียว และตอนนี้ผู้พัฒนาก็ยังพัฒนาไลบรารี่ตัวนี้อย่างต่อเนื่องมีฟังก์ชัน คอมโพเนนท์ใหม่ๆ มาให้ใช้ แต่อย่างไรก็ตามถ้าจะหวังว่าความครบถ้วนของคอมโพเนนท์แล้วหละก็ คงต้องทำใจ เพราะว่าไลบรารี่นี้พึ่งสร้างมาได้ไม่นานคงต้องรออีกสักพักนะครับ สุดท้ายนี้หากใครสนใจลองเปลี่ยนมาลอง Chakra UI ก็สามารถเริ่มต้นไปด้วยกันได้เลยนะครับ 🙂

อ้างอิง

Posted in react

ใส่ความเห็น