Egghead Zag.js Workshop

Welcome to the Egghead.io workshop on Building UI Components with Statecharts. In this course, you will:

• Learn fundamental concept of state machine, event and transition
• Model a UI component with state machine
• Connect state machine logic to UI
• Manage DOM events in state machines
• Create custom React hooks with state machines

Zag.js

• GitHub repo: https://github.com/chakra-ui/zag
• Documentation: https://zagjs.com/

Getting Started

To run this code in this repo:

• Clone this repo
• You need to have pnpm installed. To do this, run npm install -g pnpm.
• In the repo's directory, run pnpm install
• Run pnpm dev. You should see this:

VITE v3.1.4  ready in 694 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose

• Navigate to http://localhost:5173/.

Lessons

Lessons are separated by branches. This branch contains the first set of lesson (01-04) and subsequent lessons are in their respective branches.

• Lesson 05 - Create Logic in Zag.js
• Lesson 06 - Connnect Logic to UI
• Lesson 07 - Handling Focus and Blur Events
• Lesson 08 - Handling Input Event
• Lesson 09 - Handling Backspace Event
• Lesson 10 - Handling Paste Event
• Lesson 11 - Ensure Single Character
• Lesson 12 - Trigger Value Completion
• Lesson 13 - Usage with Forms
• Lesson 14 - Refactor to Custom Hook