Add Controls to Next.js Page Props with Story Args
In this lesson, we add Storybook controls to page stories using Storybook args. With args, stories can be manipulated and transformed in the browser. Additionally, we configure all stories in a module to use default args.
Michael Chan: [0:00] Args are a powerful way to add controls for data that we might change in Storybook components. For example, this component takes a name prop, name="John Doh". Providing the prop directly changes the story, but using args, we'll let anyone viewing this story change this data as well.
[0:21] We achieve this by adding an args property to the home page story. It's an object, just like props, so we use name: "John Dough". We just need to configure our story to take args and spread them out over the component. Now we see name available in Controls, so we can see what this page will look like with different names.
[0:46] Finally, args are composable, so we can provide a default as well -- name: "John Doe". This John Doe will get used if we don't provide any args for the specific story.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!