nylas-notification

The nylas-notification element displays notifications.

import { NylasNotification } from '@nylas/react';
import React, { useEffect } from 'react';

export const NylasNotificationExample: React.FC = () => {
const ref = React.createRef<HTMLNylasNotificationElement>();

useEffect(() => {
if (ref.current === null) return;
console.debug('dispatching nylasSchedulerError');

window.document.querySelector('body')?.dispatchEvent(
  new CustomEvent('nylasSchedulerError', {
    detail: {
      id: '1',
      type: 'error',
      title: 'Error',
      description: 'An error occurred',
      category: 'component',
      ttl: 'none',
    },
  }),
);
}, [ref]);

return (
<div className="inline-block border border-dashed border-gray-300 rounded-md p-4">
  <NylasNotification ref={ref} className="relative top-0 right-0" />
</div>
);
};

export default NylasNotificationExample;

Properties

`allowedCategories?`


Name	`allowedCategories`
Description
Type	`string[]`

`ttl?`


Name	`ttl`
Description	Time-to-live for notifications, in milliseconds. Set to `none` to disable auto-dismissal.
Type	`none` \| number

Code samples

The nylas-notification element is automatically included in the main NylasScheduling component. The following code samples show how to use the element on its own.

<nylas-notification
  notification='{
    "id": "notification-1",
    "type": "success",
    "title": "Success!",
    "description": "Your booking has been confirmed.",
    "ttl": 5000
  }'
  on-notification-dismissed="handleNotificationDismissed">
</nylas-notification>

<!-- Success notification -->
<nylas-notification
  notification='{
    "id": "success-1",
    "type": "success",
    "title": "Success!",
    "description": "Operation completed successfully."
  }'>
</nylas-notification>

<!-- Error notification -->
<nylas-notification
  notification='{
    "id": "error-1",
    "type": "error",
    "title": "Error",
    "description": "Something went wrong. Please try again."
  }'>
</nylas-notification>

<!-- Warning notification -->
<nylas-notification
  notification='{
    "id": "warning-1",
    "type": "warning",
    "title": "Warning",
    "description": "Please review your information."
  }'>
</nylas-notification>

<!-- Info notification -->
<nylas-notification
  notification='{
    "id": "info-1",
    "type": "info",
    "title": "Information",
    "description": "Here's some helpful information."
  }'>
</nylas-notification>

<nylas-notification
  notification='{
    "id": "auto-dismiss",
    "type": "info",
    "title": "Auto-dismiss",
    "description": "This will disappear in 3 seconds",
    "ttl": 3000
  }'>
</nylas-notification>

// Listen for notification dismissal
element.addEventListener('notificationDismissed', (event) => {
  const { id } = event.detail;
  console.log('Notification dismissed:', id);

  // Remove from your notification list
  removeNotification(id);
});