mittwald Flow Logo

Components

NotificationProvider

Der NotificationProvider dient zur Anzeige und Steuerung von Notifications.GitHub

Initialisierung

Damit Notifications angezeigt werden können, muss der <NotificationProvider /> als übergeordnete Component eingebunden werden.

Meine App
import { NotificationProvider } from "@mittwald/flow-react-components";

<NotificationProvider>Meine App</NotificationProvider>

Notifications anzeigen

Über den useNotificationController() Hook kann auf den Notification-Controller zugegriffen werden. Dieser stellt zum Anzeigen einer Notification die add()-Methode bereit.

import {
  Button,
  Heading,
  Notification,
  Text,
  useNotificationController,
} from "@mittwald/flow-react-components";

export default () => {
  const controller = useNotificationController();

  return (
    <Button
      onPress={() =>
        controller.add(
          <Notification
            onClick={() => alert("Notification clicked")}
            status="warning"
          >
            <Heading>No SSL certificate</Heading>
            <Text>
              No SSL certificate could be issued for
              examples.de.
            </Text>
          </Notification>,
        )
      }
    >
      Trigger Notification
    </Button>
  );
}

Automatisches Schließen

Ist das Property autoClose gesetzt, verschwinden die Notifications nach 10 Sekunden.

import {
  Button,
  Heading,
  Notification,
  Text,
  useNotificationController,
} from "@mittwald/flow-react-components";

export default () => {
  const controller = useNotificationController();

  return (
    <Button
      onPress={() =>
        controller.add(
          <Notification
            onClick={() => alert("Notification clicked")}
            status="warning"
            autoClose
          >
            <Heading>No SSL certificate</Heading>
            <Text>
              No SSL certificate could be issued for
              examples.de.
            </Text>
          </Notification>,
        )
      }
    >
      Trigger Notification
    </Button>
  );
}

Manuelles Schließen

Die add()-Methode gibt eine Notification-ID zurück. Diese kann in der remove()-Methode verwendet werden, um eine Notification manuell zu schließen.

import {
  Button,
  Heading,
  Notification,
  Text,
  useNotificationController,
} from "@mittwald/flow-react-components";

export default () => {
  const controller = useNotificationController();

  return (
    <Button
      onPress={() => {
        const filename = `export_${Math.round(Math.random() * 1000)}.zip`;

        const notificationId = controller.add(
          <Notification status="info" autoClose={false}>
            <Heading>File is downloading</Heading>
            <Text>
              The file "{filename}" is beeing downloaded.
            </Text>
          </Notification>,
        );

        setTimeout(() => {
          controller.remove(notificationId);
          controller.add(
            <Notification status="success" autoClose>
              <Heading>Download completed</Heading>
              <Text>
                The download of "{filename}" is completed.
              </Text>
            </Notification>,
          );
        }, 3000);
      }}
    >
      Trigger Notification
    </Button>
  );
}

Overview