Zag-基于状态机的组件库

官方介绍：

Zag 是一个与框架无关的工具包，用于设计系统和 Web 应用程序中实现复杂、交互式和可访问的 UI 组件。

可以在 React、Solid 和 Vue 中构建可访问的 UI 组件，无需为逻辑而烦恼。

简单理解：使用状态机方法实现常见的组件模式
背景介绍
过去我们经历了太多与我们如何协调事件、管理状态和副作用有关的小问题和错误。大多数这些错误都与useEffect编排useMemo有关useCallback。

二、Zag的特性
Why Zag?

由状态机提供支持：Zag 建立在状态图中的最新理念之上。不遵循 SCXML 规范，创建了一个我们认为可以帮助我们快速构建更复杂组件的 API。
一次编写，随处使用：组件交互以与框架无关的方式建模。我们为 JS 框架提供了适配器，因此可以在 React、Solid 或 Vue 3 中使用它。
关注可访问性：Zag 在构建时考虑了可访问性。处理了与键盘交互、焦点管理、咏叹调角色和属性相关的许多细节。
Headless：machine APIs完全没有样式，让用户可以控制使用自己喜欢的任何样式解决方案。
增量采用：根据需要采用机器。每个组件机器都是一个 NPM 包，可以单独安装，以便用户可以增量使用它们。
三、安装
Zag 可以在大多数 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 来提供自动渲染优化。

二、与 Vue 3 (JSX) 一起使用
Zag 与 Vue 的 JSX 方法无缝协作。在 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>
  )
}


作者：广东靓仔

欢迎关注：前端早茶