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/