React
@zag-js/react
The react wrapper for zag
State Management
ui-machines
state-machines
zag
react
use-machine
hook
@zag-js/react
State Management
javascript
npm
Stars
5.2k
Weekly
1.0M
Open issues
12
Bundle
~25 kB
Installation
npm install @zag-js/reactCode example
import { create } from "@zag-js/react";
const useStore = create((set) => ({
count: 0,
inc: () => set((s) => ({ count: s.count + 1 })),
}));
export function Example() {
const { count, inc } = useStore();
return (
<button type="button" onClick={inc}>
Count: {count}
</button>
);
}Pros & cons
Pros
- Actively maintained by Segun Adebayo <sage@adebayosegun.com>
- 1.0M weekly downloads. Battle tested
- First-class TypeScript definitions
- MIT licensed
Considerations
- Adds roughly ~25 kB to your bundle
- Needs client-only rendering in SSR frameworks
- Not supported in React Native
- 12 open issues on GitHub