React component library bundle for RVO based on the NL Design System architecture
npm install @nl-rvo/component-library-reactROOS voor React is een set van React componenten die eenvoudig te gebruiken zijn.
De componenten maken gebruikt van de ROOS design tokens en assets (fonts, icons, images). Deze moet je apart toevoegen aan je project.
``shell`
npm install --save-dev --save-exact @nl-rvo/component-library-react
De componenten kunnen in je React project worden gebruikt zoals hieronder:
`js
import { Button, Heading } from "@nl-rvo/component-library-react";
const Example = () => {
return (
<>
);
};
export default Example;
`
De design tokens van ROOS passen de RVO huisstijl toe op de componenten. Deze kun je als volgt toevoegen aan je project:
- Installeer de NPM package
`shell`
npm install --save-dev --save-exact @nl-rvo/design-tokens
- Importeer de design tokens in je React project
`js`
import "@nl-rvo/design-tokens/dist/index.css";
- Gebruik de ThemeProvider op een niveau boven de React componenten.
`js
import { Button, Heading, ThemeProvider } from "@nl-rvo/component-library-react";
const Example = () => {
return (
);
};
export default Example;
`
Het lettertype, icons en images van ROOS/Rijkshuisstijl moet je apart toevoegen aan je React project.
Deze zitten omwille van licenties en gebruiksrechten niet in de NPM package.
Dit betekent dat de componenten zonder deze assets niet helemaal correct gestyled zijn.
Wanneer je de huisstijl assets wil gebruiken kun je voor de package en toestemming contact opnemen met de huisstijl coördinator van RVO via rijksbredehuisstijl@rvo.nl.
Wanneer je de assets-package hebt ontvangen, kun je deze toevoegen aan je React project.
`js``
import "./fonts/index.css";
import "./icons/index.css";
import "./images/index.css";
De CSS bestanden bevatten design tokens voor de assets die door de componenten worden gebruikt.
De TypeScript declarations voor de React componenten worden standaard meegeleverd.