@oslokommune/punkt-react
Version:
React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo
56 lines (33 loc) • 1.74 kB
Markdown
## Bruk av punkt-react
<a href="https://www.npmjs.com/package/@oslokommune/punkt-react" target="_blank"><img src="https://img.shields.io/npm/v/@oslokommune/punkt-react?logo=react&label=react&style=for-the-badge&color=61dafb" alt="React komponenter" /></a>
Dette repoet inneholder Punkt sine UI-komponenter for React. Komponentene er laget for å fungere sammen med `@oslokommune/punkt-assets` og `@oslokommune/punkt-css`. De fleste komponenter tar i bruk custom elements fra `@oslokommune/punkt-elements`. Enn så lenge støtter vi ikke full bruk i server-side-genererte apper.
## 📝 Forutsetninger
Peer dependencies:
- nodejs `24.16.0`
- react `>= 18`
- @oslokommune/punkt-assets `*`
- @oslokommune/punkt-css `*`
## 🚀 Kom i gang - npm
### 1. Installer komponentbiblioteket
```sh
npm add @oslokommune/punkt-react
```
### 2. Importer komponentene
```js
// src/App.tsx
import { PktButton, PktTextInput } from "@oslokommune/punkt-react";
...
<PktTextInput label="First name" id="firstName" />
<PktButton skin="primary" variant="icon-left" iconName="user">
Testbutton
</PktButton>
```
## 🟪 Ikoner
Alle våre komponenter bruker PktIcon-komponenten for å importere
ikonene via vår [CDN](https://punkt-cdn.oslo.kommune.no/).
Om du har en content security policy(CSP) satt opp må du åpne for https://punkt-cdn.oslo.kommune.no/ i din CSP.
## 🔢 Versjonering
Punkt bruker [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering av pakkene.
## 👮 Lisens
`Punkt` er distribuert under [MIT-lisens](https://github.com/oslokommune/punkt/blob/main/packages/react/LICENSE) for åpen kildekode.
