Statechart Driven UI Components with Zag.js

1h 6m
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.8
37
people completed
Bookmark
Download
RSS

Learn how to build a pin-input component with state machines, Zag.js and React.

We’ll look at modeling a UI component with state machines, implementing those in a framework agnostic way using Zag.js, and connect the logic to the UI component.

This course is a must-watch if you’re unfamiliar with State machines, and want to learn how to use them to build UI components with ease.

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

Instructor

Segun Adebayo

UI Engineer + Designer 🦄 . @Github Star ⭐️ Creator of @chakra_ui and @zag_js. Design Systems + Artifical Intelligence + State Machines

Course content (15 lessons)

    illustration for Statechart Driven UI Components with Zag.js