---
title: "Du trenger ikke Storybook for å lage en playground"
url: "https://www.bekk.christmas/post/2023/12/du-trenger-ikke-storybook-for-a-lage-en-playground"
authors: ["Marcus Haaland"]
published: "2023-12-12"
updated: "2024-11-07T13:05:28Z"
language: "nb-NO"
type: "article"
tags: ["React", "JavaScript", "Utvikling"]
---
# Du trenger ikke Storybook for å lage en playground
Storybook tilbyr en rå, interaktiv playground for å teste ulike props, men det kommer med en pris: med det følger en tvangstrøye av et design.
Ved å kombinere React Live og litt strengkonkatenering kan du lage en løsning du har full kontroll over, samtidig som du gir brukerne dine en effektiv måte å få oversikt over en komponents muligheter.
## Kort fortalt
En playground for React-komponenter kan bygges uten Storybook ved å kombinere React Live med et skjema som oppdaterer propsene. Ved å holde koden i en variabel, generere JSX-strengen fra et props-objekt og synke den med forhåndsvisningen, får du både live preview, kodeeditor og interaktiv styring av komponenten. Oppsettet kan også utvides ved å definere prop-typer og rendre riktige skjemaelementer automatisk.
- **Passer for:** React-utviklere som vil lage en egen komponent-playground uten Storybook
- **Fint å kunne fra før:** Grunnleggende React, props og useEffect
_Generert med KI_
## Hva består en playground av?
Det jeg hadde lyst på var en playground, som lot meg teste ulike props og å se hvordan komponenten ville se ut, lignende det Storybook tilbyr:
_I Storybook kan du endre skjema props i skjema for å endre forhåndsvisning av komponent_
Vi hadde valgt bort Storybook til fordel for fleksibilitet, og måtte derfor lage noe tilsvarende på egenhånd. Så hvordan bygger du noe sånt fra scratch?
Vi kan dele det opp i noen enklere funksjonaliteter:
- Forhåndsvisning av komponent
- Kodeeditor
- Endre komponenten via skjema
- Generere skjema utifra props
## Forhåndsvisning og kodeeditor
La oss starte med [React Live](https://formidable.com/open-source/react-live/), som huker av for to krav. Det er et bibliotek som tilbyr både forhåndsvisning av kode og en kodeeditor. Koden som blir vist er styrt av `code`-propen i `LiveProvider`:
```jsx
const code = ``;
```
Her er hvordan dette ser ut rendret på en side:
_Med React Live får du forhåndsvisning og editor_
Når koden endres, oppdateres forhåndsvisningen. Det skjer også om en bruker endrer på teksten i editoren.
Men vi ønsker ikke å tvinge brukerne til å skrive ut alle varianter selv via editoren. Så hvordan kan vi endre koden utenfor selve kodeeditoren?
## Hvordan endre på komponenten med et skjema
Siden forhåndsvisningen automatisk endrer seg når koden i `LiveProvider` endrer seg, trenger vi bare å sette koden for `LiveProvider` i en variabel, så vi senere kan oppdatere den:
```jsx
const [code, setCode] = useState("");
```
Vi kan så lage en variabel `componentProps` for å holde styr på props. Vi lager det som et objekt, så vi kan holde styr på hvilken prop som har hvilken verdi. Her initert med variant og children:
```jsx
type ComponentProps = Record;
const [componentProps, setComponentProps] = useState({
variant: "secondary",
children: "knapp"
});
```
Vi kan så oppdatere `code`-variabelen når `componentProps` endres. Dette gjør vi via en `useEffect`.
Siden `LiveProvider` tar imot en streng, gjør vi om objektet til en streng med key-value-par. Så putter vi den strengen i komponentnavnet for å rendre komponenten riktig:
```jsx
useEffect(() => {
const propsString = Object.entries(componentProps)
.map(([key, value]) => `${key}="${value}"`)
.join(" ");
setCode(``);
}, [componentProps]);
```
Her er resultatet:
_Vi har fått til å rendre komponenten ved å iterere over forhåndsdefinerte props_
Vi har nå gått fra å hardkode en streng, til å danne strengen via props definert i et objekt. Resultatet er det samme, men omskrivningen vår gjør det lettere for oss å legge til noe viktig: interaktivitet.
## Hvordan får vi til interaktivitet?
For å få til interaktivitet bruker vi et skjemaelement som vil oppdatere `componentProps`. Vi lager en handler `handlePropChange` som tar imot propnavnet vi vil oppdatere og den nye verdien.
Her legger vi handleren på en select:
```jsx
// 👇 En enkel funksjon som oppdaterer en nøkkel i et objekt, vårt propnavn, med en ny verdi
const handlePropChange = (propName: string, value: string): void => {
setComponentProps({ ...componentProps, [propName]: value });
};
// ...mer kode
return (
);
```
Nå har vi fått til interaktivitet for en av propsene våre:
_Nå kan vi enkelt endre visning av knappen for propen variant_
Men ulike komponenter vil ha ulike inputs avhengig av props. Hvordan kan vi generere skjemaelementer basert på props?
## Generere skjema utifra props
En måte er å definere hvilke props en knapp har, og hvilke verdier vi ønsker å vise frem. Legg merke til at vi også definerer `type`, som vi vil bruke for å switche hvilket skjema-element vi rendrer verdiene i:
```jsx
interface PropRenderOption {
propName: string;
type: "select" | "textInput";
options?: string[];
}
const propRenderOptions: PropRenderOption[] = [
{
propName: "variant",
type: "select",
options: ["primary", "ghost"]
},
{
propName: "children",
type: "textInput"
}
];
```
Etter å ha definert typer, kan vi switche over props og rendre passende skjema-elementer, her med eksempel select og text-input:
```jsx
const inputs = propRenderOptions.map((prop) => {
switch (prop.type) {
case "textInput": // 👈 Vi rendrer en passende skjema-input avhengig av typen vi har satt
return (
);
case "select": // 👈 Samme handler brukes for select
return (
);
default:
return null;
}
});
return (
);
```
Her er resultatet:
_Playground med forhåndsvisning, editor og skjema lagd med React live_
## Avsluttende ord
En playground er et utrolig nyttig verktøy som effektivt demonstrerer mulighetene til en komponent. Med bruk av React Live og litt streng-konkatenering, har vi sett hvor langt vi kan ta funksjonaliteten.
Over har jeg vist en basal løsning for å få prinsippene frem, men her er noen forslag til videre forbedringer:
- Flytt playgroundProps ut i egen fil for oversiktlighet
- Legg også til inititialProps, for bedre startpunkt over hva komponenten kan gjøre
- Ikke rendre children som en prop, men mellom opening- og closing tag.
- Støtt sammensatte komponenter
- Finn en automagisk måte å hente ut komponenter sine props (det har dessverre ikke jeg funnet, så rop ut om du finner en løsning!)
💛 Denne playgrounden er inspirert av [Enturs playground](https://design.entur.no/komponenter/skjemaelementer/textfield). Tusen takk til Magnus Rand som pekte meg i retning av hvordan deres var lagd, så jeg kunne lage min egen versjon.