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

Implement Conditional Logic in a Zag.js Action to Enforce a Single Character Per Input

Share this video with your friends

We have a bug in our pin input. Only 1 value should be allowed per input but if we focus an input that already has a value we can still input another value.

Let's fix that.

We'll need to implement a function getNextValue that will take in the focused value of the current input and the event input that is coming in. After a set of conditionals we will select the value that wasn't the current focused value to update the field.

Implement Conditional Logic in a Zag.js Action to Enforce a Single Character Per Input

Share this video with your friends

Course

Statechart Driven UI Components with Zag.js