Formatters

React

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

<DescriptionList>
    <DescriptionTerm>Fødselsnummer</DescriptionTerm>
    <DescriptionDetail>{formatFodselsnummer("01065100203")}</DescriptionDetail>
    <DescriptionTerm>Kortnummer</DescriptionTerm>
    <DescriptionDetail>{formatKortnummer("5457623898234113")}</DescriptionDetail>
    <DescriptionTerm>Kontonummer</DescriptionTerm>
    <DescriptionDetail>{formatKontonummer("44441155546")}</DescriptionDetail>
    <DescriptionDetail>{formatKontonummer("44441155546", { separator: "." })}</DescriptionDetail>
    <DescriptionTerm>Telefonnummer</DescriptionTerm>
    <DescriptionDetail>{formatTelefonnummer("98651731")}</DescriptionDetail>
    <DescriptionDetail>{formatTelefonnummer("22438634")}</DescriptionDetail>
    <DescriptionDetail>{formatTelefonnummer("81549300")}</DescriptionDetail>
    <DescriptionTerm>Avstand</DescriptionTerm>
    <DescriptionDetail>{formatAvstand("12000")}</DescriptionDetail>
    <DescriptionDetail>{formatAvstand("8000", { suffix: " per år" })}</DescriptionDetail>
    <DescriptionDetail>{formatAvstand("9,81", { unit: "meter", suffix: "/s" })}</DescriptionDetail>
    <DescriptionTerm>Valuta</DescriptionTerm>
    <DescriptionDetail>{formatValuta("127,5")}</DescriptionDetail>
    <DescriptionDetail>{formatValuta("5000")}</DescriptionDetail>
    <DescriptionDetail>
        {formatValuta("859", { prefix: "kr", suffix: "", minimumFractionDigits: 2 })}
    </DescriptionDetail>
    <DescriptionTerm>Generelle tall</DescriptionTerm>
    <DescriptionDetail>{formatNumber("123")}</DescriptionDetail>
    <DescriptionDetail>{formatNumber("12345")}</DescriptionDetail>
    <DescriptionDetail>{formatNumber("1234567")}</DescriptionDetail>
    <DescriptionDetail>{formatNumber("12345,67")}</DescriptionDetail>
    <DescriptionTerm>Dato</DescriptionTerm>
    <DescriptionDetail>{formatDate(new Date())}</DescriptionDetail>
</DescriptionList>

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:

import { registerWithMasks } from "@fremtind/jkl-formatters-util";

const form = useForm<Skjema>();
const [formData, setFormData] = useState<Skjema>();

const {
    registerWithFodselsnummerMask,
    registerWithKontonummerMask,
    registerWithKortnummerMask,
    registerWithTelefonnummerMask,
} = registerWithMasks(form);

return (
    <>
        <form className="input-mask-example-form" onSubmit={form.handleSubmit(setFormData)}>
            <TextInput
                label="Telefonnummer"
                // Husk å gi plass til mellomrommene som settes inn!
                maxLength={11}
                {...registerWithTelefonnummerMask("telefonnummer", {
                    required: "Du må fylle inn telefonnummeret ditt",
                })}
                errorLabel={form.formState.errors.telefonnummer?.message}
            />
            <TextInput
                label="Fødselsnummer"
                maxLength={12}
                {...registerWithFodselsnummerMask("fodselsnummer")}
            />
            <TextInput label="Kortnummer" maxLength={19} {...registerWithKortnummerMask("kortnummer")} />
            <TextInput label="Kontonummer" maxLength={13} {...registerWithKontonummerMask("kontonummer")} />
            <PrimaryButton type="submit">Send inn</PrimaryButton>
        </form>
        {formData && (
            <>
                <p className="jkl-heading-1 jkl-spacing-2xl--top">Innsendt data:</p>
                <DescriptionList className="jkl-body jkl-spacing-l--top">
                    {Object.entries(formData).map(([field, value]) => (
                        <>
                            <DescriptionTerm>{field}:</DescriptionTerm>
                            <DescriptionDetail>{value}</DescriptionDetail>
                        </>
                    ))}
                </DescriptionList>
            </>
        )}
    </>
);

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.

formatValuta