Hopp til innhold

Formatters

Bruk formatterere når du ønsker å vise et tall med et spesifikt format; for eksempel et telefonnummer, et personnummer, eller et beløp.

Fødselsnummer
010651 00203
Kortnummer
5457 6238 9823 4113
Kontonummer
4444 11 55546
4444.11.55546
Telefonnummer
986 51 731
22 43 86 34
815 49 300
+47 986 51 731
+47 22 43 86 34
+47 815 49 300
Avstand
12 000 km
8 000 km per år
9,81 m/s
Valuta
127,50 kr
5 000 kr per måned
kr 859,00
Generelle tall
123
12 345
1 234 567
12 345,67
Dato
28.06.2022

Formatterere fungerer bra alle steder der du vil vise tallinformasjon på en måte som er enklere å lese for brukeren. Det kan være i løpende tekst, tabeller, lister, eller liknende. Ved å bruke formatererene fra Jøkul sikrer du at tallinformasjon representeres likt på tvers av løsningene våre. Det skaper gjenkjennelighet for brukeren!

Maskering av skjemafelter

Noen av formatererne kan også med fordel brukes til maskering av skjemafelter. Det kan gjøre det lettere for brukeren å se at de har skrevet inn lange verdier (som kort- og kontonummer) riktig.

For å gjøre implementeringen av dette enklere tilbyr jkl-formatters-util hjelpefunksjoner for react-hook-form (kun for v7 eller nyere) som setter maske på feltet for deg:

Hjelpefunksjonene brukes på samme måte som register fra react-hook-form, men du må sende inn form-objektet fra useForm som første argument. Det legges ikke til validering, så om du ønsker dette må du legge det inn selv. Bruk gjerne validatorene i Jøkul!

React API

Her finner du en oversikt over props på komponentene i pakken.