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.

Tab not found

The tab you tried to access no longer exists or you do not have permission to view it.

Overview