1. Sonner Toast组件基础入门第一次接触Sonner这个React Toast组件时我被它的轻量级和灵活性惊艳到了。相比其他Toast库Sonner的API设计特别符合直觉几分钟就能上手。Toast作为现代Web应用不可或缺的UI元素Sonner提供了从基础提示到复杂交互的全套解决方案。安装只需要一行命令npm install sonner # 或者 yarn add sonner基础配置简单到令人发指。在你的应用入口文件比如App.jsx中添加Toaster组件就能全局启用Toast功能import { Toaster } from sonner; function App() { return ( div classNameApp Toaster / {/* 其他组件 */} /div ); }实际使用时各种类型的Toast调用就像说话一样自然import { toast } from sonner; // 成功提示 toast.success(文件上传成功); // 错误提示 toast.error(网络连接失败); // 加载状态 toast.loading(正在处理中...);我特别喜欢Sonner的默认动画效果——Toast出现时的弹性动画和消失时的渐变过渡让简单的提示也变得生动起来。而且默认的四种主题色成功绿、错误红、警告黄、信息蓝完全遵循现代UI设计规范不需要额外配置就能完美融入大多数项目。2. 深度配置与个性化定制当项目需求变得更复杂时Sonner的配置能力才真正展现威力。通过toastOptions参数我们可以对Toast进行深度定制。比如修改背景色和文字样式Toaster toastOptions{{ style: { background: #1e1e2d, color: #fff, border: 1px solid #3e3e4d }, className: custom-toast }} /更厉害的是图标自定义功能。去年我做的一个金融项目需要全套自定义图标Sonner完美支持import { CheckCircle, XCircle } from lucide-react; Toaster icons{{ success: CheckCircle size{18} /, error: XCircle size{18} /, // 其他图标... }} /位置控制是Toast的另一个关键功能。Sonner支持六种定位方式我在移动端项目中最常用的是top-centerToaster positiontop-center /参数配置表格总结参数类型默认值说明positionstringtop-right支持top/bottom left/right/center组合durationnumber4000显示时长(毫秒)themestringlight支持light/dark/systemcloseButtonbooleanfalse是否显示关闭按钮invertbooleanfalse颜色反转3. 动态交互与Toast更新实际项目中经常需要动态更新Toast内容。Sonner通过id机制实现了这个功能这在文件上传进度显示时特别有用const uploadToast () { const toastId toast.loading(开始上传 0%); // 模拟上传进度 let progress 0; const interval setInterval(() { progress 10; toast.loading(上传中 ${progress}%, { id: toastId }); if (progress 100) { clearInterval(interval); toast.success(上传完成, { id: toastId }); } }, 500); };Promise集成是另一个杀手级功能。处理异步操作时它能自动显示加载状态并在完成后切换const fetchData () { const promise fetch(/api/data).then(res res.json()); toast.promise(promise, { loading: 加载数据中..., success: (data) 成功加载 ${data.items.length} 条记录, error: 数据加载失败 }); };我在电商项目中常用这种模式来处理下单流程。用户点击支付按钮后Toast会依次显示支付处理中→支付成功→生成订单的完整状态流转体验非常流畅。4. 动态倒计时高级实现倒计时Toast是提升用户体验的利器。通过自定义Hook我们可以实现带倒计时显示的Toast。首先创建useCountdown Hookimport { useState, useEffect, useCallback } from react; export function useCountdown(initialSeconds, onEnd) { const [seconds, setSeconds] useState(initialSeconds); const restart useCallback((newSeconds) { setSeconds(newSeconds ?? initialSeconds); }, [initialSeconds]); useEffect(() { if (seconds 0) { onEnd?.(); return; } const timer setInterval(() { setSeconds(prev { if (prev 1) { clearInterval(timer); onEnd?.(); return 0; } return prev - 1; }); }, 1000); return () clearInterval(timer); }, [seconds, onEnd]); return [seconds, restart]; }然后创建增强型Toast组件import { toast } from sonner; import { useCountdown } from ./useCountdown; export function CountdownToast({ initialSeconds 5, message, showCountdown true, showClose true }) { const [seconds] useCountdown(initialSeconds, () { toast.dismiss(); }); return ( div classNametoast-container div classNametoast-content {showClose ( button onClick{() toast.dismiss()} classNameclose-button × /button )} span{message}/span /div {showCountdown ( div classNamecountdown{seconds}s/div )} /div ); }实际使用时可以创建带倒计时的权限请求提示toast( CountdownToast initialSeconds{10} message请确认权限设置 showCountdown showClose /, { duration: 10000, position: top-center } );在最近的后台管理系统项目中我用这个方案实现了会话过期提醒功能。当用户长时间不操作时会显示会话将在30秒后过期的倒计时Toast点击取消可以延长会话否则自动登出。用户反馈这种可视化倒计时让他们对系统状态有了更清晰的掌控感。5. 实战技巧与性能优化经过多个项目的实战检验我总结出几个Sonner的高阶用法。首先是批量处理技巧在表格批量操作时特别有用const batchDelete async (ids) { const results await Promise.allSettled( ids.map(id api.deleteItem(id)) ); const successes results.filter(r r.status fulfilled); const failures results.filter(r r.status rejected); if (successes.length) { toast.success(成功删除 ${successes.length} 项); } if (failures.length) { toast.error(${failures.length} 项删除失败); } };移动端适配要注意两个关键参数Toaster mobileOffset{24} swipeDirectiondown /性能优化方面要特别注意Toast数量控制。在数据看板这种高频触发场景中我通常会做防抖处理import { debounce } from lodash-es; const debouncedToast debounce(toast.success, 1000); // 在数据频繁更新时 dataStream.on(update, () { debouncedToast(数据已刷新); });主题切换也是常见需求Sonner完美支持动态主题const [theme, setTheme] useState(light); Toaster theme{theme} / // 切换主题时 const toggleTheme () { setTheme(prev prev light ? dark : light); };在大型项目中我会把Toast配置封装成自定义Hook统一管理所有提示逻辑export function useAppToast() { const showSuccess useCallback((message) { toast.success(message, { duration: 2000 }); }, []); const showError useCallback((message) { toast.error(message, { duration: 3000 }); }, []); // 其他定制方法... return { showSuccess, showError }; }
React Sonner Toast组件实战：从基础配置到动态倒计时优化
1. Sonner Toast组件基础入门第一次接触Sonner这个React Toast组件时我被它的轻量级和灵活性惊艳到了。相比其他Toast库Sonner的API设计特别符合直觉几分钟就能上手。Toast作为现代Web应用不可或缺的UI元素Sonner提供了从基础提示到复杂交互的全套解决方案。安装只需要一行命令npm install sonner # 或者 yarn add sonner基础配置简单到令人发指。在你的应用入口文件比如App.jsx中添加Toaster组件就能全局启用Toast功能import { Toaster } from sonner; function App() { return ( div classNameApp Toaster / {/* 其他组件 */} /div ); }实际使用时各种类型的Toast调用就像说话一样自然import { toast } from sonner; // 成功提示 toast.success(文件上传成功); // 错误提示 toast.error(网络连接失败); // 加载状态 toast.loading(正在处理中...);我特别喜欢Sonner的默认动画效果——Toast出现时的弹性动画和消失时的渐变过渡让简单的提示也变得生动起来。而且默认的四种主题色成功绿、错误红、警告黄、信息蓝完全遵循现代UI设计规范不需要额外配置就能完美融入大多数项目。2. 深度配置与个性化定制当项目需求变得更复杂时Sonner的配置能力才真正展现威力。通过toastOptions参数我们可以对Toast进行深度定制。比如修改背景色和文字样式Toaster toastOptions{{ style: { background: #1e1e2d, color: #fff, border: 1px solid #3e3e4d }, className: custom-toast }} /更厉害的是图标自定义功能。去年我做的一个金融项目需要全套自定义图标Sonner完美支持import { CheckCircle, XCircle } from lucide-react; Toaster icons{{ success: CheckCircle size{18} /, error: XCircle size{18} /, // 其他图标... }} /位置控制是Toast的另一个关键功能。Sonner支持六种定位方式我在移动端项目中最常用的是top-centerToaster positiontop-center /参数配置表格总结参数类型默认值说明positionstringtop-right支持top/bottom left/right/center组合durationnumber4000显示时长(毫秒)themestringlight支持light/dark/systemcloseButtonbooleanfalse是否显示关闭按钮invertbooleanfalse颜色反转3. 动态交互与Toast更新实际项目中经常需要动态更新Toast内容。Sonner通过id机制实现了这个功能这在文件上传进度显示时特别有用const uploadToast () { const toastId toast.loading(开始上传 0%); // 模拟上传进度 let progress 0; const interval setInterval(() { progress 10; toast.loading(上传中 ${progress}%, { id: toastId }); if (progress 100) { clearInterval(interval); toast.success(上传完成, { id: toastId }); } }, 500); };Promise集成是另一个杀手级功能。处理异步操作时它能自动显示加载状态并在完成后切换const fetchData () { const promise fetch(/api/data).then(res res.json()); toast.promise(promise, { loading: 加载数据中..., success: (data) 成功加载 ${data.items.length} 条记录, error: 数据加载失败 }); };我在电商项目中常用这种模式来处理下单流程。用户点击支付按钮后Toast会依次显示支付处理中→支付成功→生成订单的完整状态流转体验非常流畅。4. 动态倒计时高级实现倒计时Toast是提升用户体验的利器。通过自定义Hook我们可以实现带倒计时显示的Toast。首先创建useCountdown Hookimport { useState, useEffect, useCallback } from react; export function useCountdown(initialSeconds, onEnd) { const [seconds, setSeconds] useState(initialSeconds); const restart useCallback((newSeconds) { setSeconds(newSeconds ?? initialSeconds); }, [initialSeconds]); useEffect(() { if (seconds 0) { onEnd?.(); return; } const timer setInterval(() { setSeconds(prev { if (prev 1) { clearInterval(timer); onEnd?.(); return 0; } return prev - 1; }); }, 1000); return () clearInterval(timer); }, [seconds, onEnd]); return [seconds, restart]; }然后创建增强型Toast组件import { toast } from sonner; import { useCountdown } from ./useCountdown; export function CountdownToast({ initialSeconds 5, message, showCountdown true, showClose true }) { const [seconds] useCountdown(initialSeconds, () { toast.dismiss(); }); return ( div classNametoast-container div classNametoast-content {showClose ( button onClick{() toast.dismiss()} classNameclose-button × /button )} span{message}/span /div {showCountdown ( div classNamecountdown{seconds}s/div )} /div ); }实际使用时可以创建带倒计时的权限请求提示toast( CountdownToast initialSeconds{10} message请确认权限设置 showCountdown showClose /, { duration: 10000, position: top-center } );在最近的后台管理系统项目中我用这个方案实现了会话过期提醒功能。当用户长时间不操作时会显示会话将在30秒后过期的倒计时Toast点击取消可以延长会话否则自动登出。用户反馈这种可视化倒计时让他们对系统状态有了更清晰的掌控感。5. 实战技巧与性能优化经过多个项目的实战检验我总结出几个Sonner的高阶用法。首先是批量处理技巧在表格批量操作时特别有用const batchDelete async (ids) { const results await Promise.allSettled( ids.map(id api.deleteItem(id)) ); const successes results.filter(r r.status fulfilled); const failures results.filter(r r.status rejected); if (successes.length) { toast.success(成功删除 ${successes.length} 项); } if (failures.length) { toast.error(${failures.length} 项删除失败); } };移动端适配要注意两个关键参数Toaster mobileOffset{24} swipeDirectiondown /性能优化方面要特别注意Toast数量控制。在数据看板这种高频触发场景中我通常会做防抖处理import { debounce } from lodash-es; const debouncedToast debounce(toast.success, 1000); // 在数据频繁更新时 dataStream.on(update, () { debouncedToast(数据已刷新); });主题切换也是常见需求Sonner完美支持动态主题const [theme, setTheme] useState(light); Toaster theme{theme} / // 切换主题时 const toggleTheme () { setTheme(prev prev light ? dark : light); };在大型项目中我会把Toast配置封装成自定义Hook统一管理所有提示逻辑export function useAppToast() { const showSuccess useCallback((message) { toast.success(message, { duration: 2000 }); }, []); const showError useCallback((message) { toast.error(message, { duration: 3000 }); }, []); // 其他定制方法... return { showSuccess, showError }; }
