Sonner库中实现永久显示的Toast通知方案

背景介绍

Sonner是一个轻量级的JavaScript通知库，用于在Web应用中创建Toast通知。Toast通知是一种非侵入式的消息提示方式，通常会在屏幕角落短暂显示后自动消失。然而在某些特定场景下，开发者可能需要Toast通知保持显示状态，直到用户主动交互。

永久显示Toast的实现方法

在Sonner库中，Toast通知默认会在一段时间后自动消失。但通过设置duration参数为JavaScript的Infinity值，可以实现Toast永久显示的效果：

createSonner("重要通知内容", {
    duration: Infinity,
});

技术原理

Infinity是JavaScript中的一个特殊数值，表示数学概念中的无穷大。当将duration参数设置为Infinity时，Sonner内部会将其解释为"永不自动关闭"。

典型应用场景

1. 用户协议和Cookie同意：如提问者所述，用于显示必须用户主动确认的隐私政策或Cookie使用协议
2. 关键操作确认：需要用户明确确认的重要操作提示
3. 持久状态通知：需要一直显示直到特定条件满足的系统状态通知

注意事项

1. 使用永久显示的Toast时，务必提供明确的关闭或确认按钮
2. 考虑用户体验，不要过度使用永久Toast，以免影响用户操作
3. 在移动设备上要特别注意Toast的显示位置和响应式设计

最佳实践

// 示例：带确认按钮的永久Toast
const toastId = createSonner(
  <div>
    <p>我们使用Cookie来提升您的体验</p>
    <button onClick={() => {
      // 处理用户同意逻辑
      dismissSonner(toastId);
    }}>
      同意
    </button>
  </div>,
  {
    duration: Infinity,
    position: 'bottom-center'
  }
);

通过这种方式，开发者可以灵活控制Toast的显示时长，满足各种业务场景的需求。