README.md

Rijkshuisstijl Community Componenten - React

Dit project wordt niet gesteund door het Ministerie van Algemene Zaken.

Het toepassen van design-elementen uit dit project is strikt verboden voor organisaties die geen deel uitmaken van de centrale overheid van Nederland.

Deze package is onderdeel van het Rijkshuisstijl Community project.

Note

De componenten zijn ook beschikbaar in individuele packages als er alleen maar een deel nodig zijn

Aan de slag met React-componenten

Om de React-componenten van de Rijkshuisstijl Community te gebruiken, installeer je het components-react npm package.

De React-componenten hebben geen eigen styling. Om de Rijkshuisstijl aan je project toe te voegen, installeer je het design-tokens npm package en component-css npm package.

Note

Let erop dat je beide de @rijkshuisstijl-community/design-tokens/dist/index.css importeert en de component een child is van een element waar de rhc-theme op is toegepast. Anders zie je de component zonder styling.

npm install @rijkshuisstijl-community/components-react @rijkshuisstijl-community/components-css @rijkshuisstijl-community/design-tokens

Dit installeert de React-componenten, de design tokens en de styling. Om deze te gebruiken, importeer je ze in jouw app.

import '@rijkshuisstijl-community/design-tokens/dist/index.css'; // design tokens importeren
import '@rijkshuisstijl-community/components-css/dist/index.css'; // css importeren
import { Button } from '@rijkshuisstijl-community/components-react'; // React-component importeren

function App() {
  return (
    <div className="rhc-theme">
      {/* geef alle thema tokens mee aan child components voor styling */}
      <Button appearance="primary-action-button">Click Here!</Button>
    </div>
  );
}

export default App;

Warning

Sommige componenten gebruiken client-side functionaliteiten zoals de useRef hook, die alleen werken in Client Componenten. Voeg "use client" toe bovenaan het bestand om dit op te lossen. lees hier meer over server en client components in React.

Thema toepassen

Voor de themas maken we gebruik van de volgende 2 packages: design-tokens npm package en component-css npm package.

Dit pakket bevat de CSS-variabelen van het design systeem. Importeer het index.css-bestand uit de dist map van het pakket, en omring het deel van je applicatie waar je het thema wilt toepassen met het Rijkshuisstijl-thema met de rhc-theme class.

Thema wijzigen

Om een ander thema toe te passen moet je het importeren van import '@rijkshuisstijl-community/design-tokens/dist/{thema}/index.css'; en de class aanpassen naar het desbetreffende thema. Zie het volgende voorbeeld om het uitvoerend-groen thema toe te passen:

import '@rijkshuisstijl-community/design-tokens/dist/uitvoerend-groen/index.css'; // design tokens importeren
import '@rijkshuisstijl-community/components-css/dist/index.css'; // css importeren
import { Button } from '@rijkshuisstijl-community/components-react'; // React-component importeren

function App() {
  return (
    <div className="uitvoerend-groen">
      {/* geef alle thema tokens mee aan child components voor styling */}
      <Button appearance="primary-action-button">Click Here!</Button>
    </div>
  );
}

export default App;

Bekijk de packages/font/README.md voor de meerdere manieren om de lettertypen te installeren voor jouw project.

Testing

We bundelen de CSS direct mee met de componenten zodat je dit niet apart hoeft in te laden. Let wel op met unit tests die in de Node omgeving draaien: die ondersteunen niet altijd standaard .css files. Voor vitest moet je bijvoorbeeld pool: 'vmThreads', aanzetten in de config als je de volgende error tegenkomt: TypeError: Unknown file extension ".css"