2.1.78 • Published 5 months ago

@fremtind/jkl-modal-react v2.1.78

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

@fremtind/jkl-modal-react

Se portalen for bruk og prinsipper.

Installasjon

Tips: stilpakken blir automatisk installert som en avhengighet.

  1. npm i @fremtind/jkl-modal-react.
  2. Importér både React-komponent og stilark i prosjektet ditt.
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,
);
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-modal/modal";
@use "@fremtind/jkl-icon-button/icon-button";
@use "@fremtind/jkl-icons/icons";
2.1.58

11 months ago

2.1.59

11 months ago

2.1.56

11 months ago

2.1.57

11 months ago

2.1.55

12 months ago

2.1.69

9 months ago

2.1.67

9 months ago

2.1.68

9 months ago

2.1.65

9 months ago

2.1.66

9 months ago

2.1.63

10 months ago

2.1.64

10 months ago

2.1.61

11 months ago

2.1.62

11 months ago

2.1.60

11 months ago

2.1.78

5 months ago

2.1.76

6 months ago

2.1.77

5 months ago

2.1.74

9 months ago

2.1.75

8 months ago

2.1.72

9 months ago

2.1.73

9 months ago

2.1.70

9 months ago

2.1.71

9 months ago

2.1.54

12 months ago

2.1.52

12 months ago

2.1.53

12 months ago

2.1.51

12 months ago

2.1.49

1 year ago

2.1.50

1 year ago

2.1.47

1 year ago

2.1.48

1 year ago

2.1.45

1 year ago

2.1.46

1 year ago

2.1.43

1 year ago

2.1.44

1 year ago

2.1.42

1 year ago

2.1.41

1 year ago

2.1.40

1 year ago

2.1.39

1 year ago

2.1.38

1 year ago

2.1.37

1 year ago

2.1.36

1 year ago

2.1.35

1 year ago

2.1.34

1 year ago

2.1.33

1 year ago

2.1.27

1 year ago

2.1.28

1 year ago

2.1.25

1 year ago

2.1.26

1 year ago

2.1.29

1 year ago

2.1.32

1 year ago

2.1.30

1 year ago

2.1.31

1 year ago

2.1.24

1 year ago

2.1.23

1 year ago

2.1.22

2 years ago

2.1.21

2 years ago

2.1.20

2 years ago

2.1.19

2 years ago

2.1.18

2 years ago

2.1.17

2 years ago

2.1.16

2 years ago

2.1.15

2 years ago

2.1.2

2 years ago

2.0.3

2 years ago

2.1.1

2 years ago

2.0.2

2 years ago

2.1.4

2 years ago

2.0.5

2 years ago

2.1.3

2 years ago

2.0.4

2 years ago

2.1.6

2 years ago

2.1.5

2 years ago

2.0.6

2 years ago

2.1.8

2 years ago

2.1.7

2 years ago

2.1.0

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

2.1.9

2 years ago

2.1.14

2 years ago

2.1.12

2 years ago

2.1.13

2 years ago

2.1.10

2 years ago

2.1.11

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.12

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.0

2 years ago