lessons/ storybook

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!

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.

Open the Header story Logged Out.

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.