Args, Controls en de Actions-addon
Gebruik args om stories interactief te maken en de Actions-addon om component-events te loggen.
Args, Controls en de Actions-addon is een gratis React Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Academy bevat in totaal 4 lessen.
Wat zijn args?
Args zijn de invoer, of props, van een story. Storybook gebruikt het object args om de component weer te geven en het paneel met besturingselementen aan te sturen — een live prop-editor in de Storybook-gebruikersinterface.
Args definiëren
Stel args in het storyobject in. Storybook leidt het type besturingselement af uit het TypeScript-proptype.
export const Primary: Story = {
args: {
label: 'Click me',
variant: 'primary',
size: 'medium',
disabled: false,
},
};Het paneel met besturingselementen
Wanneer args zijn gedefinieerd, geeft Storybook interactieve besturingselementen weer in het paneel Besturingselementen onder het canvas. Als je een besturingselement wijzigt, wordt de story opnieuw weergegeven met nieuwe props — zonder dat codewijzigingen nodig zijn.
ArgTypes voor aanpassing van besturingselementen
Gebruik argTypes in de meta om aan te passen hoe een prop in de besturingselementen verschijnt: type, opties, beschrijving en standaardwaarde.
const meta: Meta<typeof Button> = {
component: Button,
argTypes: {
variant: {
control: 'select',
options: ['primary', 'secondary', 'danger'],
description: 'Visual style of the button',
},
size: {
control: { type: 'radio' },
options: ['small', 'medium', 'large'],
},
disabled: { control: 'boolean' },
label: { control: 'text' },
},
};Args verbergen in besturingselementen
Stel control: false in argTypes in om een prop in het paneel met besturingselementen te verbergen — handig voor interne props of functies.
argTypes: {
onClick: { control: false },
className: { table: { disable: true } },
},De Actions-add-on
De Actions-add-on, die deel uitmaakt van addon-essentials, registreert aanroepen van propfuncties in het paneel Acties. Gebruik fn() uit @storybook/test om spyfuncties te maken die in het paneel verschijnen.
import { fn } from '@storybook/test';
const meta: Meta<typeof Button> = {
component: Button,
args: {
onClick: fn(), // click events appear in Actions panel
onHover: fn(),
},
};Acties automatisch koppelen met argTypes
Gebruik argTypes: { onClick: { action: 'clicked' } } om automatisch een actiehandler te maken zonder fn() te importeren.
const meta: Meta<typeof Select> = {
component: Select,
argTypes: {
onChange: { action: 'changed' },
onBlur: { action: 'blurred' },
},
};Globale args
Stel args in preview.ts in om ze globaal op alle stories toe te passen — handig voor thema's, taalinstellingen of viewport-args die elke component beïnvloeden.
// .storybook/preview.ts
export const globalTypes = {
locale: {
description: 'Internationalization locale',
defaultValue: 'en',
toolbar: {
icon: 'globe',
items: ['en', 'fr', 'de'],
},
},
};De Storybook-werkbalk
Globale args met een configuratie voor toolbar verschijnen als knoppen in de Storybook-werkbalk, zodat je globaal kunt wisselen tussen thema's, taalinstellingen of breekpunten.
Args samenstellen
Neem args uit een andere story over om daarop voort te bouwen. Zo verminder je herhaling bij het maken van variantstories.
export const Primary: Story = {
args: { label: 'Save', variant: 'primary' },
};
export const PrimaryLoading: Story = {
args: { ...Primary.args, loading: true },
};
export const PrimaryDisabled: Story = {
args: { ...Primary.args, disabled: true },
};Waarden van besturingselementen toewijzen
Gebruik mapping in argTypes om voor mensen leesbare opties van besturingselementen te koppelen aan daadwerkelijke propwaarden, zoals pictogrammen of componenten.
argTypes: {
icon: {
options: ['Star', 'Heart', 'None'],
mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
control: { type: 'select' },
},
},Korte controle
Wat doet de functie fn() uit @storybook/test wanneer je deze als argument van een story gebruikt?
Samenvatting
Argumenten sturen zowel het Controls-paneel (live-editor voor eigenschappen) als de Actions-add-on (gebeurtenislogboek) aan. Definieer argumenttypen met argTypes voor uitgebreidere besturingselementen, gebruik fn() uit @storybook/test om acties te registreren en combineer argumenten tussen stories om dubbel werk te voorkomen.
Leer React met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 88
- Lessen
- 324
Veelgestelde vragen
Is de les “Args, Controls en de Actions-addon” gratis?
Ja — de volledige tekst van “Args, Controls en de Actions-addon” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus React Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus React Academy bevat in totaal 4 lessen.
Wat leer ik in “Args, Controls en de Actions-addon”?
Gebruik args om stories interactief te maken en de Actions-addon om component-events te loggen. Je oefent met React Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Academy te beginnen?
Ervaring vooraf is niet nodig. React Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Args, Controls en de Actions-addon”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Academy?
Ja. Elke les over React Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Storybook instellen in een React-project
- CSF3-stories schrijven
- Args, Controls en de Actions-addon
- Storybook testen en visuele regressie