Course

Statechart Driven UI Components with Zag.js

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
Duration: 37 s
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

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.

View code on GitHub

Instructor: [0:00] To get started we're going to run pnpm create vite. We're going to give the project a name of pin-input-machine and select React, select TypeScript. [0:13] Next, we'll cd into the pin-input-machine and do an npm install [inaudible] core. Yep, that's it. To check out the project we're going to run code, and now we have the project all set for the machines.

[0:36] We're good to go.

Statechart Driven UI Components with Zag.js

Set up a React + Zag.js Project with Vite

Social Share Links