# salla-notifications (https://docs.salla.dev/twilight/react/web-components/salla-notifications)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

A list of the signed-in customer's notifications, loaded from the store API, with a "load more" button for the next page.
Use it on a notifications page. It fetches the first page when it loads and shows a placeholder when there are none.
Each notification is rendered with salla-notification-item and links to its own URL.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-notifications>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaNotifications } from '@salla.sa/twilight-components-react/notifications';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaNotifications } from '@salla.sa/twilight-components-react/notifications';

export function Example() {
  return (
    <SallaNotifications itemPerPage={10} />
  );
}
```

```html
<salla-notifications item-per-page="10"></salla-notifications>
```

## Properties [#properties]

| Property       | Attribute        | Description                                                                                                                                                                 | Type     | Default |
| -------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| `itemPerPage`  | `item-per-page`  | Number of notifications to load per request (sent as `per_page` to the API). Only the first request uses it; later pages follow the link the API returns. Defaults to `10`. | `number` | `10`    |
| `loadMoreText` | `load-more-text` | Text of the button that loads the next page. Defaults to the translated "Load more" label.                                                                                  | `string` |         |

## Related [#related]

Renders: [`<salla-notification-item>`](https://docs.salla.dev/twilight/react/web-components/salla-notification-item), [`<salla-placeholder>`](https://docs.salla.dev/twilight/react/web-components/salla-placeholder).