1.2.0 • Published 8 months ago

@nl-rvo/component-library-react v1.2.0

Weekly downloads
-
License
EUPL-1.2
Repository
github
Last release
8 months ago

ROOS React Components

ROOS 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.

Installatie van React componenten

npm install --save-dev --save-exact @nl-rvo/component-library-react

De componenten kunnen in je React project worden gebruikt zoals hieronder:

import { Button, Heading } from "@nl-rvo/component-library-react";

const Example = () => {
  return (
    <>
      <Heading>Home</Heading>
      <Button>Dit is een button</Button>
    </>
  );
};

export default Example;

Installatie van ROOS huisstijl

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
npm install --save-dev --save-exact @nl-rvo/design-tokens
  • Importeer de design tokens in je React project
import "@nl-rvo/design-tokens/dist/index.css";
  • Gebruik de ThemeProvider op een niveau boven de React componenten.
import { Button, Heading, ThemeProvider } from "@nl-rvo/component-library-react";

const Example = () => {
  return (
    <ThemeProvider>
      <Heading>Home</Heading>
      <Button>Dit is een button</Button>
    </ThemeProvider>
  );
};

export default Example;

Gebruik van ROOS/Rijkshuisstijl lettertype, icons en images (assets)

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.

Aanvragen van assets

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.

Installatie van assets

Wanneer je de assets-package hebt ontvangen, kun je deze toevoegen aan je React project.

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.

TypeScript

De TypeScript declarations voor de React componenten worden standaard meegeleverd.

1.2.0

8 months ago

1.1.0

9 months ago

1.0.0

9 months ago

1.0.0-alpha.263

1 year ago

1.0.0-alpha.262

1 year ago

1.0.0-alpha.261

1 year ago

1.0.0-alpha.260

1 year ago

1.0.0-alpha.267

1 year ago

1.0.0-alpha.266

1 year ago

1.0.0-alpha.265

1 year ago

1.0.0-alpha.264

1 year ago

1.0.0-alpha.269

1 year ago

1.0.0-alpha.268

1 year ago

1.0.0-alpha.270

1 year ago

1.0.0-alpha.274

1 year ago

1.0.0-alpha.273

1 year ago

1.0.0-alpha.272

1 year ago

1.0.0-alpha.271

1 year ago

1.0.0-alpha.277

1 year ago

1.0.0-alpha.276

1 year ago

1.0.0-alpha.275

1 year ago

1.0.0-alpha.256

1 year ago

1.0.0-alpha.259

1 year ago

1.0.0-alpha.258

1 year ago

1.0.0-alpha.257

1 year ago

1.0.0-alpha.255

1 year ago

1.0.0-alpha.254

1 year ago

1.0.0-alpha.253

1 year ago

1.0.0-alpha.252

1 year ago

1.0.0-alpha.251

1 year ago

1.0.0-alpha.250

1 year ago

1.0.0-alpha.249

1 year ago

1.0.0-alpha.248

1 year ago

1.0.0-alpha.247

1 year ago

1.0.0-alpha.246

1 year ago

1.0.0-alpha.245

1 year ago

1.0.0-alpha.244

1 year ago

1.0.0-alpha.243

1 year ago

1.0.0-alpha.241

1 year ago

1.0.0-alpha.242

1 year ago

1.0.0-alpha.240

1 year ago

1.0.0-alpha.239

1 year ago

1.0.0-alpha.238

1 year ago

1.0.0-alpha.237

1 year ago

1.0.0-alpha.236

1 year ago

1.0.0-alpha.234

1 year ago

1.0.0-alpha.235

1 year ago

1.0.0-alpha.233

1 year ago

1.0.0-alpha.232

1 year ago

1.0.0-alpha.230

1 year ago

1.0.0-alpha.231

1 year ago

1.0.0-alpha.229

1 year ago

1.0.0-alpha.228

1 year ago

1.0.0-alpha.227

1 year ago

1.0.0-alpha.226

1 year ago

1.0.0-alpha.225

1 year ago

1.0.0-alpha.223

1 year ago

1.0.0-alpha.222

1 year ago

1.0.0-alpha.224

1 year ago

1.0.0-alpha.221

1 year ago

1.0.0-alpha.220

1 year ago

1.0.0-alpha.219

1 year ago

1.0.0-alpha.218

1 year ago

1.0.0-alpha.217

1 year ago

1.0.0-alpha.216

1 year ago

1.0.0-alpha.215

1 year ago

1.0.0-alpha.214

1 year ago

1.0.0-alpha.212

1 year ago

1.0.0-alpha.211

1 year ago

1.0.0-alpha.213

1 year ago

1.0.0-alpha.209

1 year ago

1.0.0-alpha.210

1 year ago

1.0.0-alpha.208

1 year ago

1.0.0-alpha.207

1 year ago

1.0.0-alpha.206

1 year ago

1.0.0-alpha.205

1 year ago

1.0.0-alpha.204

1 year ago

1.0.0-alpha.201

2 years ago

1.0.0-alpha.203

2 years ago

1.0.0-alpha.202

2 years ago

1.0.0-alpha.200

2 years ago

1.0.0-alpha.199

2 years ago

1.0.0-alpha.197

2 years ago

1.0.0-alpha.196

2 years ago

1.0.0-alpha.195

2 years ago

1.0.0-alpha.194

2 years ago

1.0.0-alpha.198

2 years ago

1.0.0-alpha.193

2 years ago

1.0.0-alpha.192

2 years ago

1.0.0-alpha.191

2 years ago

1.0.0-alpha.186

2 years ago

1.0.0-alpha.185

2 years ago

1.0.0-alpha.184

2 years ago

1.0.0-alpha.189

2 years ago

1.0.0-alpha.188

2 years ago

1.0.0-alpha.187

2 years ago

1.0.0-alpha.190

2 years ago

1.0.0-alpha.182

2 years ago

1.0.0-alpha.183

2 years ago

1.0.0-alpha.181

2 years ago

1.0.0-alpha.180

2 years ago

1.0.0-alpha.175

2 years ago

1.0.0-alpha.179

2 years ago

1.0.0-alpha.178

2 years ago

1.0.0-alpha.177

2 years ago

1.0.0-alpha.176

2 years ago

1.0.0-alpha.174

2 years ago

1.0.0-alpha.173

2 years ago

1.0.0-alpha.172

2 years ago

1.0.0-alpha.171

2 years ago

1.0.0-alpha.170

2 years ago

1.0.0-alpha.169

2 years ago

1.0.0-alpha.168

2 years ago

1.0.0-alpha.167

2 years ago

1.0.0-alpha.166

2 years ago

1.0.0-alpha.142

2 years ago

1.0.0-alpha.141

2 years ago

1.0.0-alpha.140

2 years ago

1.0.0-alpha.146

2 years ago

1.0.0-alpha.145

2 years ago

1.0.0-alpha.144

2 years ago

1.0.0-alpha.143

2 years ago

1.0.0-alpha.149

2 years ago

1.0.0-alpha.148

2 years ago

1.0.0-alpha.147

2 years ago

1.0.0-alpha.153

2 years ago

1.0.0-alpha.152

2 years ago

1.0.0-alpha.151

2 years ago

1.0.0-alpha.150

2 years ago

1.0.0-alpha.157

2 years ago

1.0.0-alpha.156

2 years ago

1.0.0-alpha.155

2 years ago

1.0.0-alpha.154

2 years ago

1.0.0-alpha.159

2 years ago

1.0.0-alpha.158

2 years ago

1.0.0-alpha.160

2 years ago

1.0.0-alpha.164

2 years ago

1.0.0-alpha.163

2 years ago

1.0.0-alpha.162

2 years ago

1.0.0-alpha.161

2 years ago

1.0.0-alpha.165

2 years ago

1.0.0-alpha.135

2 years ago

1.0.0-alpha.134

2 years ago

1.0.0-alpha.133

2 years ago

1.0.0-alpha.139

2 years ago

1.0.0-alpha.138

2 years ago

1.0.0-alpha.137

2 years ago

1.0.0-alpha.136

2 years ago

1.0.0-alpha.129

2 years ago

1.0.0-alpha.124

2 years ago

1.0.0-alpha.123

2 years ago

1.0.0-alpha.122

2 years ago

1.0.0-alpha.128

2 years ago

1.0.0-alpha.127

2 years ago

1.0.0-alpha.126

2 years ago

1.0.0-alpha.125

2 years ago

1.0.0-alpha.131

2 years ago

1.0.0-alpha.130

2 years ago

1.0.0-alpha.132

2 years ago

1.0.0-alpha.109

2 years ago

1.0.0-alpha.108

2 years ago

1.0.0-alpha.107

2 years ago

1.0.0-alpha.120

2 years ago

1.0.0-alpha.121

2 years ago

1.0.0-alpha.106

2 years ago

1.0.0-alpha.105

2 years ago

1.0.0-alpha.104

2 years ago

1.0.0-alpha.119

2 years ago

1.0.0-alpha.118

2 years ago

1.0.0-alpha.113

2 years ago

1.0.0-alpha.112

2 years ago

1.0.0-alpha.111

2 years ago

1.0.0-alpha.110

2 years ago

1.0.0-alpha.117

2 years ago

1.0.0-alpha.116

2 years ago

1.0.0-alpha.115

2 years ago

1.0.0-alpha.114

2 years ago

1.0.0-alpha.100

2 years ago

1.0.0-alpha.99

2 years ago

1.0.0-alpha.98

2 years ago

1.0.0-alpha.97

2 years ago

1.0.0-alpha.96

2 years ago

1.0.0-alpha.95

2 years ago

1.0.0-alpha.94

2 years ago

1.0.0-alpha.93

2 years ago

1.0.0-alpha.92

2 years ago

1.0.0-alpha.91

2 years ago

1.0.0-alpha.90

2 years ago

1.0.0-alpha.89

2 years ago

1.0.0-alpha.88

2 years ago

1.0.0-alpha.87

2 years ago

1.0.0-alpha.86

2 years ago

1.0.0-alpha.85

2 years ago

1.0.0-alpha.84

2 years ago