# NotificationProvider

Der NotificationProvider dient zur Anzeige und Steuerung von Notifications.

## Overview

# Initialisierung

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

```tsx
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.

```tsx
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.

```tsx
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.

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