React component library bundle for the Municipality of Utrecht based on the NL Design System architecture
npm install @utrecht/component-library-reactJe kunt de React componenten van de @utrecht/component-library-react npm package gebruiken voor je eigen website. Het zijn "white label" componenten, dat betekent dat ze niet de Utrecht huisstijl hebben — je kunt je eigen ontwerp gebruiken met design tokens.
Je kunt deze package gebruiken in React apps, zowel client side als server side, om de juiste HTML elementen te renderen met CSS class names van het Utrecht Design System.
Documentation staat in de Storybook voor Utrecht React componenten.
``shell`
npm install --save-dev --save-exact @utrecht/component-library-react
Wanneer je dit pakketje hebt geïnstalleerd, dan kun je elke component uit de React component gebruiken voor je pagina. Bijvoorbeeld:
`jsx
import { Document, Heading1 } from "@utrecht/component-library-react/dist/css-module";
export const MyPage = () => (
Als je geen CSS injection wilt, dan kun je dezelfde componenten importeren uit een andere plek (zonder
/dist/css-module). CSS injection levert soms problemen op bij websites met een stricte Content-Security-Policy.`jsx
import { Document, Heading1 } from "@utrecht/component-library-react";export const MyPage = () => (
Page styled with NL Design System
);
`Design toevoegen met een thema
Gebruik je eigen design met de volgende stappen:
1. Maak een eigen thema op basis van design tokens.
2. Laad de CSS van je thema in. Daarin zitten de CSS variables voor het ontwerp van de componenten.
3. Voeg in HTML de CSS class name toe van je theme, op het niveau boven je componenten.
$3
Installeer de npm package met de CSS:
`shell
npm install --save-dev @utrecht/design-tokens
`In veel React projecten is het mogelijk de CSS te importeren in JavaScript. Voeg de
import voor de thema CSS toe, en gebruik de utrecht-theme class name op een niveau boven de React componenten.`jsx
import { Document, Heading1 } from "@utrecht/component-library-react";
import "@utrecht/design-tokens/dist/index.css";export const MyPage = () => (
Page styled with NL Design System
);
``De TypeScript declarations voor de React componenten worden standaard meegeleverd.
Stel je support-vragen in het #nl-design-system-developers Slack-kanaal.