How to connect props with Storybook controls
Need to learn about Storybook controls in a hurry?
Storybook controls make your documentation come to life with auto-generated, interactive UI for component props! This video is your crash course into Storybook controls.
Visit our comprehensive Controls documentation to learn more: https://storybook.js.org/docs/react/e...
▬ How to connect component props with Storybook Controls ▬▬▬▬▬▬▬▬▬▬
00:00 Intro
00:30 What are Storybook controls?
01:31 Create a new component story with controls
02:13 Write stories that take args
02:37 Apply args to component stories
03:18 Storybook infers control types
03:33 Args only apply to a single story
04:04 Add type annotations to get default controls for all stories
05:36 Beware, inferred types aren't always what you want…
06:29 Add argTypes to specify controls types for all stories in a file
07:35 Where do I learn more about Storyboook controls?
08:38 Outro
▬ Follow us! ▬▬▬▬▬▬▬▬▬▬
Discord: / discord
Twitter: / storybookjs
Instagram: / storybookjs
GitHub: https://github.com/storybookjs/storybook
Follow @chantastic on:
twitter: / chantastic
youtube: @chantastic
▬ Learn more ▬▬▬▬▬▬▬▬▬▬
Storybook at https://learnstorybook.com/
Storybook addons at https://storybook.js.org/addons
Component driven UI development at https://www.componentdriven.org/
▬ Free Storybook hosting ▬▬▬▬▬▬▬▬▬▬
Chromatic is made by Storybook maintainers and sets up in just 2 minutes.
Claim free Storybook hosting at https://www.chromatic.com/