Follow these simple steps to install and start using Sand Alerts in your Next.js application.
Sand Alerts is currently in development and will be available for installation soon! Stay tuned for a simple setup process that integrates seamlessly with your Next.js projects.
We’re working hard to bring you a powerful alert system. Want to be the first to know when it’s ready? Follow us on GitHub
Wrap your application with the AlertProvider to enable alert functionality across components.
// app/layout.tsx
import { AlertProvider } from 'sand-alerts';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<AlertProvider>
{children}
</AlertProvider>
</body>
</html>
);
};
Use the useAlert hook in your components to trigger alerts.
// components/MyComponent.tsx
import { CheckCircle } from 'lucide-react';
export default function MyComponent() {
const { showAlert } = useAlert();
const handleClick = () => {
showAlert({
type: 'success',
message: 'Welcome to Sand Alerts!',
icon: CheckCircle,
});
};
return (
<button onClick={handleClick} className="btn">
Show Welcome Alert
</button>
);
};
Explore the Usage page to see more examples or dive into Features to learn about all the possibilities with Sand Alerts.