Flow

Components

NotificationProvider

Die NotificationProvider dient zur Anzeige und Steuerung von NotificationsGitHub

Initialisierung

Damit Notifications angezeigt werden können, muss der <NotificationProvider /> als obere Komponente existieren.

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

<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()-Method bereit.

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

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>
  );
}

Auto close

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

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

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>
  );
}
Feedback geben