Sand Alerts

How to Use Sand Alerts

Learn how to integrate and customize Sand Alerts in your Next.js application with these practical examples.

Basic Usage

Trigger a simple success alert with sound using the useAlert hook.

import { useAlert } from '@/lib/hooks/useAlert';
import { CheckCircle } from 'lucide-react';

const MyComponent = () => {
  const { showAlert } = useAlert();

  const handleClick = () => {
    showAlert({
      type: 'success',
      message: 'Operation completed successfully!',
      icon: CheckCircle,
      playSound: true,
      soundOptions: { volume: 0.5 }
    });
  };

  return (
    <button onClick={handleClick} className="btn">
      Show Success Alert
    </button>
  );
};

export default MyComponent;

Custom Icon

Customize the alert icon with any Lucide React icon and set an auto-dismiss duration.

import { useAlert } from '@/lib/hooks/useAlert';
import { Star } from 'lucide-react';

const CustomAlertComponent = () => {
  const { showAlert } = useAlert();

  const handleClick = () => {
    showAlert({
      type: 'info',
      message: 'This alert uses a custom icon!',
      icon: Star,
      duration: 5000
    });
  };

  return (
    <button onClick={handleClick} className="btn">
      Show Custom Icon Alert
    </button>
  );
};

export default CustomAlertComponent;

Ready to Configure More?

Dive into the Configuration page to explore advanced options like animations, sound settings, and more.