Chakra UI 有提供不少 React hooks 讓我們實作元件更方便

useMediaQuery

這個 hook 幫助我們去偵測 media query 是否匹配，可以偵測單個或多個 media query。背後是採取了 Window.matchMedia() 這個 API。

使用方式如下，帶進去的可以是字串 '(min-width: 1920px)' 或是陣列 ['(min-width: 1920px)','(display-mode: browser)'] 會回傳 bookeans 構成的陣列。

const [isLargerThan1280] = useMediaQuery('(min-width: 1280px)')

要注意的是如果是必需是瀏覽器支援 window.matchMedia，若像是 serverside rednder 則無法使用

useBreakpointValue

這個 hook 是為 server-side rendering 所設計，適合在無法使用 mediaqueries 時使用。
會回傳對應的 breakpoint 數值

const variant = useBreakpointValue({ 
    base: 'outline', 
    md: 'solid' 
  }, {
    // Breakpoint to use when mediaqueries cannot be used, such as in server-side rendering
    // (Defaults to 'base')
    fallback: 'md'
  })

useDisclosure

這個 hook 幫助我們，去完成當元件是有開關行為的 UI，像是 Modal、Drawer、AlertDialog
常見使用方式如下

function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <>
      <Button onClick={onOpen}>Open Drawer</Button>
      <Drawer placement='right' onClose={onClose} isOpen={isOpen}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader borderBottomWidth='1px'>Basic Drawer</DrawerHeader>
          <DrawerBody>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  )
}

這個 hook 概念相對簡單，也可以嘗試自己 custom hooks，可以參考我這次鐵人團隊查理是如果自己做出 useToggle 這個 hook: 自己的Hook自己做！useToggle 讓你想開就開，想關就關

useOutsideClick

這個 hook 很常處理　Modal 展開時點擊別處關閉

function Example() {
  const ref = React.useRef()
  const [isModalOpen, setIsModalOpen] = React.useState(false)
  useOutsideClick({
    ref: ref,
    handler: () => setIsModalOpen(false),
  })

  return (
    <>
      {isModalOpen ? (
        <div ref={ref}>
          ? Hey, I'm a modal. Click anywhere outside of me to close.
        </div>
      ) : (
        <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      )}
    </>
  )
}

useToken

當我已經在 style config 布局好顏色色系時，一般來說就可以運用在 props style 中
例如

<Text color="blue.500">鐵人賽</Text>
<Box bgColor="blue.500" color="gray.200>鐵人賽</Text>

但如果是像是 border 的樣式 border: "1px solid blue.500" ，會發現無法如預期運作，我們必須是直接寫入顏色數值在 border css 語法中。
這時候就可以靠 useToken 取得 blue.500 數值帶入。
使用時傳入 theme 的 key，以顏色就是 theme.colors。第二個參數是color的key theme.colors.blue.500

const [blue500] = useToken('colors',['blue.500'])

取得顏色的數值後，方便我們以字串模板寫好 border 的樣式

<Box border={`1px solid ${blue500}`}>鐵人賽</Box>