## Notifications Migration Guide  
This page helps you migrate from the NotificationProvider to the NotificationContainer  
Category: Releases  

Starting in `dash-mantine-components` v2.0.0, the notification system has been redesigned to align more closely
with Mantine’s implementation. The `NotificationProvider` and `Notification` components are now deprecated and
will be removed in a future release. 

See the [new Notification documentation](components/notification) for more details.

Need to reference the old version? Visit the [DMC 1.3.0 Notification docs](https://dmc-docs-1-3.onrender.com/components/notification) 

### Key Changes

* Old approach:

  * Add `NotificationProvider` to your app layout.
  * Include a separate output container, such as `html.Div`.
  * Return `Notification` components from callbacks to show messages.

* New approach:

  * Add a single `NotificationContainer` inside your `MantineProvider`.
  * Use the `sendNotifications` prop to show or update notifications.
  * Use the `hideNotifications`, `clean`, and `cleanQueue` props to use the `hide`, `clean` and `cleanQueue` features.
  * Use the `appNotifications` API for client-side interactions.

### Updating Your Code

Before (deprecated):

```python
app.layout = dmc.MantineProvider(
    [
        dmc.NotificationProvider(),
        html.Div(id="notifications-output"),  
        # other components
    ]
)
```

After (recommended):

```python
app.layout = dmc.MantineProvider([
    dmc.NotificationContainer(id="notification-container"),
    # other components...
])
```

### Show Notifications

Before:

```python
@app.callback(
    Output("notification-output", "children"),
    Input("trigger-button", "n_clicks"),
)
def show_notification(n_clicks):
    if n_clicks:
        return dmc.Notification(
            title="Notification",
            message="This is a notification.",
            color="blue",
            action="show",
            id="notify"
        )
    return None
```

After:

```python
@app.callback(
    Output("notification-container", "sendNotifications"),
    Input("trigger-button", "n_clicks"),
)
def show_notification(n_clicks):
    if n_clicks:
        return [{
            "action": "show",
            "title": "Notification",
            "message": "This is a notification.",
            "color": "blue",
            "id": "notify"
        }]
    return []
```

### Update Notifications

Before:

```python
@app.callback(
    Output("notification-output", "children"),
    Input("trigger-button", "n_clicks"),
)
def show_notification(n_clicks):
    if n_clicks:
        return dmc.Notification(
            title="Notification",
            message="This is an updated notification.",
            color="blue",
            action="update",
            id="notify"
        )
    return None
```

After:

```python
@app.callback(
    Output("notification-container", "sendNotifications"),
    Input("trigger-button", "n_clicks"),
)
def show_notification(n_clicks):
    if n_clicks:
        return [{
            "action": "update",
            "title": "Notification",
            "message": "This is an updated notification.",
            "color": "blue",
            "id": "notify"
        }]
    return []
```

### Hide Notifications

Before:

```python
@app.callback(
    Output("notification-output", "children"),
    Input("trigger-button", "n_clicks"),
)
def hide_notification(n_clicks):
    if n_clicks:
        return dmc.Notification(
            action="hide",
            id="notify"
        )
    return None
```

After:

```python
@app.callback(
    Output("notification-container", "hideNotifications"),
    Input("trigger-button", "n_clicks"),
)
def hide_notification(n_clicks):
    if n_clicks:
        return ["notify"] #ids  of notifications to hide
    return []
```

### Clean

Before:

```python
@app.callback(
    Output("notification-output", "children"),
    Input("trigger-button", "n_clicks"),
)
def clean_notification(n_clicks):
    if n_clicks:
        return dmc.Notification(
            action="clean"
        )
    return None
```

After:

```python
@app.callback(
    Output("notification-container", "clean"),
    Input("trigger-button", "n_clicks"),
)
def clean_notification(n_clicks):
    if n_clicks:
        return True
    return no_update
```

### Clean Queue

Before:

```python
@app.callback(
    Output("notification-output", "children"),
    Input("trigger-button", "n_clicks"),
)
def cleanQueue_notification(n_clicks):
    if n_clicks:
        return dmc.Notification(
            action="cleanQueue"
        )
    return None
```

After:

```python
@app.callback(
    Output("notification-container", "cleanQueue"),
    Input("trigger-button", "n_clicks"),
)
def cleanQueue_notification(n_clicks):
    if n_clicks:
        return True
    return no_update
```



### Keyword Arguments


#### NotificationProvider

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- autoClose (number | boolean; optional):
    Auto close timeout for all notifications in ms, `False` to disable
    auto close, can be overwritten for individual notifications in
    `notifications.show` function, `4000` by defualt.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- containerWidth (string | number; optional):
    Notification width, cannot exceed 100%, `440` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- limit (number; optional):
    Maximum number of notifications displayed at a time, other new
    notifications will be added to queue, `5` by default.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- notificationMaxHeight (string | number; optional):
    Notification `max-height`, used for transitions, `200` by default.

- position (a value equal to: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'; optional):
    Notifications position, `'bottom-right'` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- transitionDuration (number; optional):
    Notification transition duration in ms, `250` by default.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withinPortal (boolean; optional):
    Determines whether notifications container should be rendered
    inside `Portal`, `True` by default.

- zIndex (string | number; optional):
    Notifications container z-index, `400` by default.
#### Notification

- id (string; optional):
    Notification id, can be used to close or update notification.

- action (a value equal to: 'show', 'update', 'hide', 'clean', 'cleanQueue'; required):
    action.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- autoClose (number | boolean; optional):
    Determines whether notification should be closed automatically,
    number is auto close timeout in ms, overrides `autoClose` from
    `Notifications`.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- closeButtonProps (dict; optional):
    Props passed down to the close button.

    `closeButtonProps` is a dict with keys:

- color (optional):
    Controls notification line or icon color, key of `theme.colors` or
    any valid CSS color, `theme.primaryColor` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- icon (a list of or a singular dash component, string or number; optional):
    Notification icon, replaces color line.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading (boolean; optional):
    Replaces colored line or icon with Loader component.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- message (a list of or a singular dash component, string or number; required):
    Notification message, required for all notifications.

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- position (a value equal to: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'; optional):
    Position on the screen to display the notification.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, `theme.defaultRadius` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- title (a list of or a singular dash component, string or number; optional):
    Notification title, displayed before body.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withBorder (boolean; optional):
    Determines whether notification should have a border, `False` by
    default.

- withCloseButton (boolean; optional):
    Determines whether close button should be visible, `True` by
    default.