salla-notifications
A list of the signed-in customer's notifications, loaded from the store API, with a "load more" button for the next page.
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
In HTML or JSX, use the tag <salla-notifications> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
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
import { SallaNotifications } from '@salla.sa/twilight-components-react/notifications';
export function Example() {
return (
<SallaNotifications itemPerPage={10} />
);
}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
Renders: <salla-notification-item>, <salla-placeholder>.