Observe Component Behavior with Actions Addon
We’ve all added
console.log statements to validate a component interface.
With Storybook Actions, that’s a thing of the past!
- Open a
- Click the Shortcuts cog to ensure that the Addons Panel is visible.
- Finally, focus the Actions Addon.
Storybook can intercept events and log them to the Actions Addon Panel.
Every time I click this button, I see that the
onClick event is being logged.
This doesn’t just work with common events. It also works with custom event names.
- As we click the
Log inbutton, we see the custom
- And as we click the
Sign upbutton, we see the custom event the
So, what’s making this work?
To work across every Story, this handler is implemented at a global level in
.storybook/preview module config module.
It observes any
on* props on a component interface.
We can disable this high-level observer and see that these no longer fire.
This is a fairly advanced default. So I’ll show you a more direct way to do this in stories and components, later in the course.
Actions prevent a lot of extranious
console.loging and protects your code from accidentally committed debugging code.