https://github.com/segunadebayo/osca-state-machine-talk
An introduction to state machines and XState
https://github.com/segunadebayo/osca-state-machine-talk
fsm open-source react state-machines talk
Last synced: 3 months ago
JSON representation
An introduction to state machines and XState
- Host: GitHub
- URL: https://github.com/segunadebayo/osca-state-machine-talk
- Owner: segunadebayo
- Created: 2022-03-16T09:31:45.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-02T08:09:28.000Z (about 4 years ago)
- Last Synced: 2025-12-02T14:58:48.858Z (7 months ago)
- Topics: fsm, open-source, react, state-machines, talk
- Language: TypeScript
- Homepage: https://festival.oscafrica.org/#speakers
- Size: 25.4 KB
- Stars: 22
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://twitter.com/oscafrica/status/1503653726053191682)
- [Website](https://festival.oscafrica.org/#speakers)
- [Instagram](https://www.instagram.com/p/CbHkalbOR9S/)
- [Google Slides](https://docs.google.com/presentation/d/1myudfQI9iZF4kkfPH8WG7CK1rbQ6MpHu58oCK7ZC35Y/edit?usp=sharing)
## 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