React-handleiding

Wat je gaat bouwen

Een klein contactformulier — invoerveld met label, verzendknop, gecontroleerde state, echt toetsenbord- en schermlezergedrag — eerst kaal, dan vormgegeven, in ongeveer 10 minuten.

Voordat je begint

Je hebt git, Node 22 of nieuwer en pnpm 10 of nieuwer nodig. Elk React 18+-project werkt — Next.js, Vite of gewone React.

Stap 1 — Haal de code op

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-headless
pnpm install
pnpm test        # vitest + @testing-library/react
pnpm run storybook   # browse all 571 components

De componenten zijn platte bestanden in components/ — Button.tsx, TextInput.tsx — elk met zijn test, story en documentatie ernaast. Kopieer de bestanden die je nodig hebt naar je app, of haal de repo binnen en importeer ervandaan.

Stap 2 — Je eerste component

import Button from "lily-design-system-react-headless/components/Button";

export function SaveBar() {
  return <Button onClick={save}>Save</Button>;
}

Rendert <button class="button" type="button">. Props: type, disabled, pressed (rendert aria-pressed), label (een aria-label om te overschrijven), className, en elk extra attribuut wordt op het rootelement uitgespreid.

Stap 3 — Stel een klein formulier samen

import { useState } from "react";
import Form from ".../components/Form";
import Field from ".../components/Field";
import TextInput from ".../components/TextInput";
import Button from ".../components/Button";

export function ContactForm() {
  const [name, setName] = useState("");
  return (
    <Form label="Contact form" onSubmit={handleSubmit}>
      <Field label="Full name" required>
        <TextInput id="name" label="Full name" value={name} onChange={setName} required />
      </Field>
      <Button type="submit">Save</Button>
    </Form>
  );
}

Field neemt het zichtbare label als eigen prop in plaats van een geneste labelcomponent — geef het één keer door, op Fielden TextInputvan label levert de toegankelijke naam.

Stap 4 — Geef het vorm

Alles hierboven wordt als pure structuur gerenderd, klaar voor je stijlen. Geef de haken vorm — .button, .text-input, .label, .field — in je stylesheet, leg Tailwind-utilities eroverheen via className, of koppel een kant-en-klaar thema:

<link rel="stylesheet" href="/themes/united-states-web-design-system.css" />

Stap 5 — Zie alles werken

Next.js voorbeeld-app is de volledige catalogus vormgegeven en gedemonstreerd, met Playwright e2e en een axe-core-basislijn:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-next-examples
pnpm install && pnpm run dev

Volgende stappen

• Thema's — wisselen tijdens het draaien met de React-helper theme-picker.
• Voorkeurenhelpers — taal en tekstgrootte.
• Componentencatalogus — props, ARIA en toetsenbord per component.

Vragen onderweg? De helppagina staat vol antwoorden — en als een stap duidelijker kan, laat het ons weten en we verbeteren de handleiding graag.