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.

EksemplerBrukKode

Kom i gang

Installer
npm i @fremtind/jkl-formatters-util
Bruk
import { formatTelefonnummer } from "@fremtind/jkl-formatters-util";
React
Versjon
Dokumentasjon
Readme
Changelog

Live demo

Formatters
Visning
Tema
Tetthet
<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>

  <DescriptionTerm>Organisasjonsnummer</DescriptionTerm>

  <DescriptionDetail>

    {formatOrganisasjonsnummer("915651232")}

  </DescriptionDetail>

  <DescriptionTerm>Bytes</DescriptionTerm>

  <DescriptionDetail>{formatBytes(8_888_000_000)}</DescriptionDetail>

</DescriptionList>

Maskering av skjemafelter

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!

Maskering av skjemafelter
Visning
Tema
Tetthet
const form = useForm();

const [formData, setFormData] = React.useState();



const {

  registerWithFodselsnummerMask,

  registerWithKontonummerMask,

  registerWithKortnummerMask,

  registerWithTelefonnummerMask,

} = registerWithMasks(form);



return (

  <>

    <form

      onSubmit={form.handleSubmit(setFormData)}

      style={{

        width: "100%",

        display: "flex",

        flexDirection: "column",

        gap: "1.5rem",

        alignItems: "flex-start",

      }}

    >

      <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 className="jkl-spacing-m--top" 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>

      </>

    )}

  </>

);

React API

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