# NotificationProvider

Der NotificationProvider dient zur Anzeige und Steuerung von Notifications.

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

---

# Best Practices

- Überflute die User nicht mit zu vielen Notifications.
- Für die angezeigten Notifications gelten die
  [Best Practices der Notification](https://flow.mittwald.de/04-components/status/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.

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

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

---

# 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. |