NotificationProvider

Der NotificationProvider dient zur Anzeige und Steuerung von Notifications.

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

Best Practices

Überflute die User nicht mit zu vielen Notifications.
Für die angezeigten Notifications gelten die Best Practices der Notification‍.
Gib den Usern bei autoClose genug Zeit zum Lesen. Idealerweise ist die Anzeigedauer einstellbar.

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>

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.

Properties

Accessibility

Property	Type	Default	Description
`aria-describedby`	`string`	-	Identifies the element (or elements) that describes the object. @see aria-labelledby
`aria-hidden`	`Booleanish`	-	Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
`aria-label`	`string`	-	Defines a string value that labels the current element. @see aria-labelledby.
`aria-labelledby`	`string`	-	Identifies the element (or elements) that labels the current element. @see aria-describedby.

Components

Integrations