Modal

En modal brukes der vi trenger å avbryte den nåværende flyten for å gjøre en handling.

Eksempler Bruk Universell utforming Kode

Kom i gang

Installer

npm i @fremtind/jkl-modal-react

Bruk

import {
    ModalContainer,
    ModalOverlay,
    Modal,
    ModalHeader,
    ModalTitle,
    ModalCloseButton,
    ModalBody,
    ModalActions,
    useModal,
} from "@fremtind/jkl-modal-react";

import { PrimaryButton, TertiaryButton } from "@fremtind/jkl-button-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-modal/modal.min.css";
import "@fremtind/jkl-icon-button/icon-button.min.css";
import "@fremtind/jkl-icons/icons.min.css";

// Bruk av komponentene
const heading = "Bekreft sletting";
const role = "dialog";
const [instance, { title, overlay, container, modal, closeButton }] = useModal({ title: heading, role });

useEffect(() => {
    if (!instance) {
        return;
    }
    instance.show();
}, [instance]);

return ReactDOM.createPortal(
    <ModalContainer {...container}>
        <ModalOverlay {...overlay} />
        <Modal {...modal}>
            <ModalHeader>
                <ModalTitle {...title}>{heading}</ModalTitle>
                <ModalCloseButton {...closeButton} />
            </ModalHeader>
            <ModalBody>Er du sikker på at du vil slette Foo Bar Baz?</ModalBody>
            <ModalActions>
                <PrimaryButton onClick={() => instance?.hide()}>Bekreft</PrimaryButton>
                <TertiaryButton onClick={() => instance?.hide()}>Avbryt</TertiaryButton>
            </ModalActions>
        </Modal>
    </ModalContainer>,
    document.body,
);

React

Versjon
Dokumentasjon: Readme; Changelog

Live demo

Modal

Visning

Tema

Light

Dark

Tetthet

Default

Compact

function ModalComponent({ dialogRef, onConfirm, onCancel }) {
  const heading = "Bekreft sletting";

  const [instance, { title, overlay, container, modal, closeButton }] =
    useModal({
      title: heading,
      role: "dialog", // "dialog" er default.
      // Kan også være "alertdialog" for å skru av click outside og Esc.
    });

  React.useEffect(() => {
    dialogRef(instance);
    return () => {
      if (!instance) {
        return;
      }
      instance.destroy();
      dialogRef(null);
    };
  }, [dialogRef, instance]);

  return ReactDOM.createPortal(
    <ModalContainer {...container}>
      <ModalOverlay
        {...overlay}
        onClick={() => {
          onCancel();
        }}
      />
      <Modal {...modal}>
        <ModalHeader>
          <ModalTitle {...title}>{heading}</ModalTitle>
          <ModalCloseButton
            {...closeButton}
            onClick={() => {
              onCancel();
            }}
          />
        </ModalHeader>
        <ModalBody>Er du sikker på at du vil slette Foo Bar Baz?</ModalBody>
        <ModalActions>
          <PrimaryButton
            onClick={() => {
              onConfirm();
            }}
          >
            Bekreft
          </PrimaryButton>
          <TertiaryButton
            onClick={() => {
              onCancel();
            }}
          >
            Avbryt
          </TertiaryButton>
        </ModalActions>
      </Modal>
    </ModalContainer>,
    document.body
  );
}

const ModalExample = () => {
  const dialogRef = React.useRef();
  return (
    <>
      <PrimaryButton
        onClick={() => {
          dialogRef.current?.show();
        }}
      >
        Åpne modal
      </PrimaryButton>
      <ModalComponent
        dialogRef={(instance) => {
          dialogRef.current = instance;
        }}
        onConfirm={() => {
          console.log("✅ Confirm");
          dialogRef.current?.hide();
        }}
        onCancel={() => {
          console.log("❌ Cancel");
          dialogRef.current?.hide();
        }}
      />
    </>
  );
};

render(<ModalExample />);

React API

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