Zag

https://gyazo.com/f50dc562d70831b0d6c14cc662d3495d

2022/4/30現在はまだbeta

特徴

Write once, use everywhere

Focus on accessibility

Headless

Powered by state machines

Dialog、Slider、Tab、ToastのようなよくあるUI部品を提供している

コード例

code:ts

import * as numberInput from "@zag-js/number-input"

import { useMachine, useSetup } from "@zag-js/react"

export function NumberInput() {

// 1. Consume the machine

// 2. Setup the machine with a unique id

const ref = useSetup({ send, id: "1" })

// 3. Grab the provided API

const api = numberInput.connect(state, send)

// 4. Render the component

return (

<div ref={ref} {...api.rootProps}>

<label {...api.labelProps}>Enter number:</label>

<div>

<button {...api.decrementButtonProps}>DEC</button>

<input {...api.inputProps} />

<button {...api.incrementButtonProps}>INC</button>

</div>

</div>

)

}

これだけ見ると、やりたいことの割に複雑じゃない？という気もする

ただ、ロジック部分(上記の1,2,3の部分)はどのComponentでも同じAPIになっている

覚えることは少なくて済みそう

でもheadlessってこういうことか

accessiblityも考慮されているので楽ではある

再利用性も高そう