1
Introduction: Statechart Driven UI Components with Zag.js
47s
2
Model Finite Number of State and Events with State Machines
54s
3
Model the Basic Events, Actions, and Transitions of a Pin Input Component
2m 44s
4
Set up a React + Zag.js Project with Vite
37s
5
Style a Pin Input through Data Attributes in React
2m 32s
6
Create and Visualize a Pin Input State Machine with TypeScript and Zag.js
7m 39s
7
Connect Zag.js Machine Logic to React UI through the useMachine Hook
5m 53s
8
Implement a State Machine Action for Setting Input Focus in Zag.js
2m 54s
9
Trigger Side Effects in a Zag.js State Machine with the watch Property
7m 44s
10
Schedule Input Focus with requestAnimationFrame to Handle Multiple DOM Mutations in Zag.js
2m 46s
11
Spread Values Across a Pin Input Field in a Zag.js State Machine
3m 37s
12
Implement Conditional Logic in a Zag.js Action to Enforce a Single Character Per Input
6m 25s
13
Trigger Side Effects using Zag.js computed and watch Properties
3m 59s
14
Submit Pin Input Values in a Form with a Hidden Input
4m 51s
15
Refactor Zag.js State Machine Powered Pin Component Functionality to a Custom React Hook
13m 36s

Set up a React + Zag.js Project with Vite

Name: Set up a React + Zag.js Project with Vite
Uploaded: 2023-01-30T11:07:04-06:00
Description: We’ll spin up a Vite project for React and install the required Zag.js dependency to model the pin input component logic.

InstructorSegun Adebayo

React
Zag

Share this video with your friends

Send Tweet

We’ll spin up a Vite project for React and install the required Zag.js dependency to model the pin input component logic.

Set up a React + Zag.js Project with Vite

Share this video with your friends

Course

Statechart Driven UI Components with Zag.js