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.

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.

Overview