Zag-基于狀態(tài)機的組件庫

官方介紹：

Zag 是一個與框架無關的工具包，用于設計系統(tǒng)和 Web 應用程序中實現(xiàn)復雜、交互式和可訪問的 UI 組件。

可以在 React、Solid 和 Vue 中構建可訪問的 UI 組件，無需為邏輯而煩惱。

簡單理解：使用狀態(tài)機方法實現(xiàn)常見的組件模式
背景介紹
過去我們經歷了太多與我們如何協(xié)調事件、管理狀態(tài)和副作用有關的小問題和錯誤。大多數(shù)這些錯誤都與useEffect編排useMemo有關useCallback。

二、Zag的特性
Why Zag?

由狀態(tài)機提供支持：Zag 建立在狀態(tài)圖中的最新理念之上。不遵循 SCXML 規(guī)范，創(chuàng)建了一個我們認為可以幫助我們快速構建更復雜組件的 API。
一次編寫，隨處使用：組件交互以與框架無關的方式建模。我們?yōu)?JS 框架提供了適配器，因此可以在 React、Solid 或 Vue 3 中使用它。
關注可訪問性：Zag 在構建時考慮了可訪問性。處理了與鍵盤交互、焦點管理、詠嘆調角色和屬性相關的許多細節(jié)。
Headless：machine APIs完全沒有樣式，讓用戶可以控制使用自己喜歡的任何樣式解決方案。
增量采用：根據(jù)需要采用機器。每個組件機器都是一個 NPM 包，可以單獨安裝，以便用戶可以增量使用它們。
三、安裝
Zag 可以在大多數(shù) JS 框架中使用，例如 Vue、React 和 Solid。

@zag-js/vue



@zag-js/react



@zag-js/solid



為自己感興趣的組件安裝機器

npm i --save @zag-js/{component}
# or
yarn add @zag-js/{component}
2.為自己選擇的框架安裝適配器，命令如下：
# react
npm install @zag-js/react
# or
yarn add @zag-js/react
# vue
npm install @zag-js/vue
# or
yarn add @zag-js/vue
# solid
npm install @zag-js/solid
# or
yarn add @zag-js/solid
四、demo
一、React項目中使用的toggle machine的示例：
import { useMachine, useSetup } from "@zag-js/react"
import * as toggle from "@zag-js/toggle"

export function Toggle() {
  const [state, send] = useMachine(toggle.machine)
  const ref = useSetup({ send, id: "1" })
  const api = toggle.connect(state, send)
  return (
    <button ref={ref} {...api.buttonProps}>
      {api.isPressed ? "開" : "關"}
    </button>
  )
}
由于machine hook中使用了 useSnapshot 掛鉤，Zag 在幕后使用 valtio 來提供自動渲染優(yōu)化。

二、與 Vue 3 (JSX) 一起使用
Zag 與 Vue 的 JSX 方法無縫協(xié)作。在 Vue 中使用相同的toggle邏輯：
import { computed, defineComponent, h, Fragment } from "vue"
import * as toggle from "@zag-js/toggle"
import { useMachine, useSetup, normalizeProps } from "@zag-js/vue"

export default defineComponent({
  name: "Toggle",
  setup() {
    const [state, send] = useMachine(toggle.machine)
    const ref = useSetup({ send, id: "1" })
    const apiRef = computed(() => toggle.connect(state, send, normalizeProps))
    return () => {
      const api = apiRef.value
      return (
        <button ref={ref} {...api.buttonProps}>
          {api.isPressed ? "開" : "關"}
        </button>
      )
    }
  },
})

三、與 Solid.js 一起使用
如何在 Solid 中使用相同的toggle邏輯：
import { createMemo } from "solid-js"
import * as toggle from "@zag-js/toggle"
import { useMachine, useSetup, normalizeProps } from "@zag-js/solid"

export default function Toggle() {
  const [state, send] = useMachine(toggle.machine)
  const ref = useSetup({ send, id: "1" })
  const api = createMemo(() => toggle.connect(state, send, normalizeProps))
  return (
    <button ref={ref} {...api().buttonProps}>
      {api().isPressed ? "開" : "關"}
    </button>
  )
}


作者：廣東靚仔


歡迎關注：前端早茶