Sand Alerts

Configuring Sand Alerts

Customize Sand Alerts with advanced options like sound effects, animations, and more to suit your application’s needs.

Sound Configuration

Enhance alerts with custom sound effects, volume control, and looping options.

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

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

  const handleClick = () => {
    showAlert({
      type: 'warning',
      message: 'Warning: Low battery!',
      icon: AlertCircle,
      playSound: true,
      soundOptions: {
        volume: 0.7,
        loop: true,
        customSound: '/sounds/warning.mp3'
      }
    });
  };

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

export default SoundAlertComponent;

Animation Configuration

Add smooth enter and exit animations to make alerts visually engaging.

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

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

  const handleClick = () => {
    showAlert({
      type: 'info',
      message: 'This alert slides in!',
      icon: Info,
      animation: {
        enter: 'slideIn',
        exit: 'fadeOut',
        duration: 300 
      },
      duration: 4000
    });
  };

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

export default AnimatedAlertComponent;

Ready to Get Started?

Head to the Getting Started page to set up Sand Alerts in your project and start using these configurations.