OSCA Talk

Creating UI components with Statecharts

Statecharts (aka state machines) are becoming the de facto way of managing component states and events. This talk will explain how they work and how to build common UI widgets with them.

Bio

Segun is the creator and maintainer of Chakra UI. He is passionate about building tools, design systems, and accessible components that help bridge the gap between design and code.

Talk Links

• Twitter
• Website
• Instagram
• Google Slides

Images

• https://cln.sh/Em2RYw
• https://cln.sh/BVg3xX

Outline

• Anatomy of a Stopwatch component
• Why State machines?
• Basics of State Machines
• Delayed and Interval events
• Explain each state and transitions
• Create and Visualize Statechart
• Connect to UI
• New requirement from PM
  • start after a delay
  • reset stopwatch while ticking
• Review