Notification

The Notification component displays important messages that require attention or acknowledgment. Unlike Snackbars or Toasts, Notifications are more prominent and can contain more detailed information.

Import

import { Notification, useNotification } from '@lazy-panda-ui/lazy-panda-ui';

Usage

import React from 'react';
import { useNotification, Button } from '@lazy-panda-ui/lazy-panda-ui';

function MyComponent() {
  const notification = useNotification();

  return (
    <Button
      onClick={() => 
        notification.show({
          title: 'New Message',
          description: 'You have received a new message from John Doe',
          variant: 'info',
        })
      }
    >
      Show Notification
    </Button>
  );
}

Props

Name	Type	Default	Description
title	string | ReactNode	-	Notification title
description	string | ReactNode	-	Detailed message
variant	'default' | 'info' | 'success' | 'warning' | 'error'	'default'	Visual style
duration	number	5000	Display duration
icon	ReactNode	-	Custom icon
actions	Array<{ label: string, onClick: () => void }>	-	Action buttons
onClose	() => void	-	Close callback
position	'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'	'top-right'	Display position
persistent	boolean	false	Prevent auto-dismiss

Examples

Basic Notifications

function NotificationExample() {
  const notification = useNotification();

  return (
    <Stack direction="row" spacing="md">
      <Button
        onClick={() => 
          notification.show({
            title: 'Info Message',
            description: 'This is a basic notification',
            variant: 'info',
          })
        }
      >
        Info
      </Button>

      <Button
        onClick={() => 
          notification.show({
            title: 'Success!',
            description: 'Operation completed successfully',
            variant: 'success',
          })
        }
      >
        Success
      </Button>

      <Button
        onClick={() => 
          notification.show({
            title: 'Warning',
            description: 'Please review your settings',
            variant: 'warning',
          })
        }
      >
        Warning
      </Button>

      <Button
        onClick={() => 
          notification.show({
            title: 'Error',
            description: 'An error occurred while processing your request',
            variant: 'error',
          })
        }
      >
        Error
      </Button>
    </Stack>
  );
}

With Actions

<Button
  onClick={() =>
    notification.show({
      title: 'Friend Request',
      description: 'John Doe wants to connect with you',
      variant: 'info',
      actions: [
        {
          label: 'Accept',
          onClick: handleAccept,
        },
        {
          label: 'Decline',
          onClick: handleDecline,
        },
      ],
    })
  }
>
  Show Friend Request
</Button>

Custom Icon

<Button
  onClick={() =>
    notification.show({
      title: 'Backup Complete',
      description: 'All your files have been backed up',
      variant: 'success',
      icon: <Icon name="cloud-check" />,
    })
  }
>
  Show Backup Status
</Button>

Persistent Notification

<Button
  onClick={() =>
    notification.show({
      title: 'Update Available',
      description: 'A new version is available. Please update your app.',
      variant: 'info',
      persistent: true,
      actions: [
        {
          label: 'Update Now',
          onClick: handleUpdate,
        },
        {
          label: 'Later',
          onClick: handleDismiss,
        },
      ],
    })
  }
>
  Check Updates
</Button>

Custom Position

<Button
  onClick={() =>
    notification.show({
      title: 'Network Status',
      description: 'You are now connected to WiFi',
      position: 'bottom-left',
      variant: 'success',
    })
  }
>
  Show Network Status
</Button>

Rich Content

<Button
  onClick={() =>
    notification.show({
      title: 'New Comment',
      description: (
        <Stack spacing="md">
          <Avatar size="sm" source={{ uri: '/user.jpg' }} />
          <Stack spacing="xs">
            <Text weight="bold">John Doe</Text>
            <Text>Great work on the project! The new features look amazing.</Text>
          </Stack>
          <Image src="/comment-preview.jpg" alt="Comment Preview" />
        </Stack>
      ),
      actions: [
        {
          label: 'Reply',
          onClick: handleReply,
        },
        {
          label: 'View',
          onClick: handleView,
        },
      ],
    })
  }
>
  Show Rich Notification
</Button>

Best Practices

1. Use clear and concise titles
2. Provide helpful descriptions
3. Choose appropriate variants
4. Use actions sparingly
5. Consider notification hierarchy
6. Manage multiple notifications
7. Handle mobile responsiveness

API Reference

NotificationOptions

interface NotificationOptions {
  title: string | ReactNode;
  description?: string | ReactNode;
  variant?: 'default' | 'info' | 'success' | 'warning' | 'error';
  duration?: number;
  icon?: ReactNode;
  actions?: Array<{
    label: string;
    onClick: () => void;
    variant?: 'primary' | 'secondary';
  }>;
  onClose?: () => void;
  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
  persistent?: boolean;
  style?: CSSProperties;
  className?: string;
}

Theme Customization

const theme = {
  notification: {
    variants: {
      default: {
        background: '#ffffff',
        color: '#000000',
        borderColor: '#e0e0e0',
      },
      info: {
        background: '#E3F2FD',
        color: '#1976D2',
        borderColor: '#90CAF9',
      },
      success: {
        background: '#E8F5E9',
        color: '#388E3C',
        borderColor: '#A5D6A7',
      },
      warning: {
        background: '#FFF3E0',
        color: '#F57C00',
        borderColor: '#FFCC80',
      },
      error: {
        background: '#FFEBEE',
        color: '#D32F2F',
        borderColor: '#EF9A9A',
      },
    },
    borderRadius: '8px',
    padding: '16px',
    margin: '8px',
    maxWidth: '400px',
    zIndex: 1500,
  },
};

Related Components

• Snackbar - For brief messages
• Toast - For simple notifications
• Alert - For inline messages
• Dialog - For critical messages