Sonner 开源项目教程

项目介绍

Sonner 是一个轻量级的 JavaScript 通知库，旨在提供简单、灵活且美观的通知系统。它适用于各种前端项目，无论是简单的个人网站还是复杂的企业级应用。Sonner 的设计理念是尽可能地减少配置和学习成本，让开发者能够快速集成并使用。

项目快速启动

安装

首先，你需要通过 npm 或 yarn 安装 Sonner：

npm install sonner

或者

yarn add sonner

基本使用

在你的 JavaScript 或 TypeScript 文件中引入 Sonner，并初始化一个通知：

import { toast } from 'sonner';

toast('这是一个简单的通知');

高级配置

Sonner 支持多种配置选项，例如设置通知的类型、持续时间等：

toast('这是一个成功的通知', {
  type: 'success',
  duration: 3000,
});

应用案例和最佳实践

案例一：表单提交成功通知

在表单提交成功后，显示一个成功的通知：

const handleSubmit = async () => {
  try {
    await submitForm();
    toast('表单提交成功！', { type: 'success' });
  } catch (error) {
    toast('表单提交失败，请重试。', { type: 'error' });
  }
};

案例二：实时更新通知

在实时更新数据时，显示一个信息通知：

const handleDataUpdate = () => {
  toast('数据已更新', { type: 'info' });
};

典型生态项目

Sonner 可以与许多流行的前端框架和库集成，例如 React、Vue 和 Angular。以下是一些典型的生态项目：

React

在 React 项目中使用 Sonner：

import React from 'react';
import { toast } from 'sonner';

const MyComponent = () => {
  const handleClick = () => {
    toast('这是一个 React 通知');
  };

  return <button onClick={handleClick}>显示通知</button>;
};

export default MyComponent;

Vue

在 Vue 项目中使用 Sonner：

import { toast } from 'sonner';

export default {
  methods: {
    showNotification() {
      toast('这是一个 Vue 通知');
    },
  },
};

通过这些案例和最佳实践，你可以更好地理解和使用 Sonner 开源项目，将其集成到你的前端项目中，提升用户体验。