Toast 轻提示

全局展示操作反馈的轻量级提示组件。通过 ToastProvider 包裹应用，使用 useToast hook 调用。

基础用法

import { ToastProvider, useToast } from '@airo-ui/react'

function App() {
  return (
    <ToastProvider>
      <MyComponent />
    </ToastProvider>
  )
}

function MyComponent() {
  const { showToast } = useToast()

  return (
    <button onClick={() => showToast('操作成功')}>
      显示提示
    </button>
  )
}

不同类型

import { useToast } from '@airo-ui/react'

function Demo() {
  const { showToast } = useToast()

  return (
    <>
      <button onClick={() => showToast('操作成功', 'success')}>成功</button>
      <button onClick={() => showToast('操作失败', 'error')}>错误</button>
      <button onClick={() => showToast('请注意', 'warning')}>警告</button>
      <button onClick={() => showToast('提示信息', 'info')}>信息</button>
    </>
  )
}

自定义时长

import { useToast } from '@airo-ui/react'

function Demo() {
  const { showToast } = useToast()

  return (
    <>
      <button onClick={() => showToast('2秒后消失', 'info', 2000)}>
        2秒关闭
      </button>
      <button onClick={() => showToast('持续显示', 'info', 0)}>
        不自动关闭
      </button>
    </>
  )
}

API

ToastProvider

名称	说明
ToastProvider	包裹应用的 Provider 组件，必须在根组件中使用

useToast

const { showToast } = useToast()

// 调用签名
showToast(message: string, type?: ToastType, duration?: number): void

参数	类型	默认值	说明
message	string	—	提示内容
type	'success' | 'error' | 'warning' | 'info'	'info'	提示类型
duration	number	3000	自动关闭延迟（毫秒），设为 0 则不自动关闭