Hopp til innhold

Alert­Message

En varselmelding er en beskjed til brukeren som vises i en global sammenheng. Det kan være et varsel om at noe er feil, global informasjon eller lignende.

EksemplerBrukDesignKode

Kom i gang

Installer
npm i @fremtind/jkl-alert-message-react
Bruk
import { InfoAlertMessage } from "@fremtind/jkl-alert-message-react";



// Importer stilark via JavaScript med CSS-loader.

import "@fremtind/jkl-alert-message/alert-message.min.css";

// AlertMessage bruker ikonpakken og må ha stilene dens

import "@fremtind/jkl-icons/icons.min.css";



// Eller importer stilark via SCSS.

@use "@fremtind/jkl-alert-message/alert-message";

// AlertMessage bruker ikonpakken og må ha stilene dens

@use "@fremtind/jkl-icons/icons";
React
Versjon
Dokumentasjon
Readme
Changelog

Live demo

AlertMessage
Egenskaper
Visning
Tema
Tetthet
const [dismissed, setDismissed] = React.useState(false);



const dismissAction = false

  ? {

      handleDismiss: () => {

        setDismissed(true);

        setTimeout(() => setDismissed(false), 2600);

      },

      buttonTitle: "Merk som lest",

    }

  : undefined;



const components = {

  Info: InfoAlertMessage,

  Success: SuccessAlertMessage,

  Warning: WarningAlertMessage,

  Error: ErrorAlertMessage,

};

const Component = components['Info'];



return (

  <Component dismissed={dismissed} dismissAction={dismissAction}>

    Hei, jeg er en varslingsmelding av typen Info

  </Component>

);

React API

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