README
@fremtind/jkl-select-react
Beskrivelse
Se portalen for bruk og prinsipper.
Kom i gang
Lær hvordan du kan ta i bruk Jøkul
Bruk av React-pakken
Installasjon
Installér pakken med
yarn add @fremtind/jkl-select-react
ellernpm i @fremtind/jkl-select-react
. Stil-pakken blir automatisk installert som en avhengighet.Importer både React-pakken (velg komponenten(e) du trenger) og stil-pakken i prosjektet ditt:
import { Select, NativeSelect } from "@fremtind/jkl-select-react";
import "@fremtind/jkl-select/select.min.css";
Bruk
De to versjonene av select benytter seg av forskjellige tilnærminger: Select
konstruerer en nedtrekksliste ved hjelp av JavaScript (via pakken @nrk/core-toggle
) slik at vi kan gi den stil som matcher den visuelle profilen vår. NativeSelect
bruker et vanlig <select>
-element fra HTML. Dette kan være fordelaktig blant annet til lange lister på mobil, for å få brukt den innebygde velgeren i OSet.
Begge variantene kan ta imot et array av string
-verdier eller et array av SelectValuePair
-objekter. Dersom du sender inn string
-verdier blir de brukt som både tekst for valget og som value
for valgt verdi:
const values = ["Leilighet", "Rekkehus", "Enebolig"];
<NativeSelect label="Velg boligtype" values={values} />;
// Slik vil et av de genererte <option>-elementene se ut:
// <option value="Leilighet">Leilighet</option>
SelectValuePair
-objekter har to verdier, label
og value
, slik at du kan separere vist tekst fra verdien du behandler i løsningen din. Begge verdiene er string
-verdier:
const valuePairs = [
{ label: "Mindre enn 5 år", value: "0-5" },
{ label: "6 til 10 år", value: "6-10" },
{ label: "Mer enn 10 år", value: "11+" },
];
<NativeSelect label="Hvor lenge har du røyket?" values={valuePairs} />;
// Slik vil et av de genererte <option>-elementene se ut:
// <option value="11+">Mer enn 10 år</option>
Håndteringen av OnChange
vil være litt forskjellig mellom de to variantene av komponenten:
Select
sender kun enstring
med verdien av det valgte elementetNativeSelect
bruker ren HTML og sender dermed etChangeEvent
-objekt
Kontroll av komponenten er også litt forskjellig mellom de to variantene:
NativeSelect
fungerer som en kontrollert komponent viavalue
-prop'en