# @blaumaus/react-alert 中文文档

规范地址：https://npmcn.com/package/%40blaumaus/react-alert/

版本：7\.0\.7
npm 元数据更新时间：2024-05-26T16:54:10.645Z
中文译文更新时间：2026-11-08T06:18:43.412Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40blaumaus/react-alert
原文对照：https://npmcn.com/package/%40blaumaus/react-alert/?lang=original
项目主页：https://github.com/blaumaus/react-alert#readme
源码仓库：https://github.com/blaumaus/react-alert

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：68.8 kB，8 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- peer 依赖：react ^16\.8\.1 \|\| ^17 \|\| ^18，react-dom ^16\.8\.1 \|\| ^17 \|\| ^18
- 首次发布：2022-04-17T23:10:52.416Z
- 最新版本发布：2024-05-26T16:54:10.481Z
- 近 30 天下载量：6186（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 0 个）

## 中文简介

简单的反应提醒组件

## 安装

```sh
npm install @blaumaus/react-alert
```

也可以使用：`pnpm add @blaumaus/react-alert`、`yarn add @blaumaus/react-alert`、`bun add @blaumaus/react-alert`

## README

# 反应提醒

> 反应提醒

[![travis build](https://img.shields.io/travis/schiehll/react-alert.svg?style=flat-square)](https://travis-ci.org/schiehll/react-alert) [![version](https://img.shields.io/npm/v/react-alert.svg?style=flat-square)](http://npm.im/react-alert)

## 演示

[![Edit l2mo430lzq](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l2mo430lzq)

## 安装

```bash
$ npm install --save @blaumaus/react-alert
```

### 模板

需要时可以提供自己的警戒模板. 否则你只能插上以下一个:

-   [基础](https://github.com/schiehll/react-alert-template-basic)
-   [阴暗](https://github.com/schiehll/react-alert-template-oldschool-dark)
-   [材料界面](https://github.com/MMMayC/react-alert-template-mui)

请随意提交您自己的模板链接的 PR .

要启动, 请尝试安装基本操作 :

```bash
$ npm install --save react-alert react-alert-template-basic
```

### 同伴依赖关系

此软件包预计会有以下对等依赖性:

```
  "react": "^16.8.1"
  "react-dom": "^16.8.1"
```

一定要把这些也装好!

## 使用量

首先,您必须用提供方包起您的应用程序,给它提供提示模板和一些选项:

```js
// index.js
import React from 'react'
import { render } from 'react-dom'
import { transitions, positions, Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'
import App from './App'

// optional configuration
const options = {
  // you can also just use 'bottom center'
  position: positions.BOTTOM_CENTER,
  timeout: 5000,
  offset: '30px',
  // you can also just use 'scale'
  transition: transitions.SCALE
}

const Root = () => (
  <AlertProvider template={AlertTemplate} {...options}>
    <App />
  </AlertProvider>
)

render(<Root />, document.getElementById('root'))
```

然后导入 `useAlert` 显示提示的钩 :

```js
// App.js
import React from 'react'
import { useAlert } from 'react-alert'

const App = () => {
  const alert = useAlert()

  return (
    <button
      onClick={() => {
        alert.show('Oh look, an alert!')
      }}
    >
      Show Alert
    </button>
  )
}

export default App
```

就这样!

您也可以使用 HOC 来:

```js
import React from 'react'
import { withAlert } from 'react-alert'

const App = ({ alert }) => (
  <button
    onClick={() => {
      alert.show('Oh look, an alert!')
    }}
  >
    Show Alert
  </button>
)

export default withAlert()(App)
```

## 选项

您可以通过下列选项作为道具 `Provider`数字 :

```js
offset: PropTypes.string // the margin of each alert
position: PropTypes.oneOf([
  'top left',
  'top right',
  'top center',
  'middle left',
  'middle',
  'middle right',
  'bottom left',
  'bottom right',
  'bottom center'
]) // the position of the alerts in the page
timeout: PropTypes.number // timeout to alert remove itself, if  set to 0 it never removes itself
type: PropTypes.oneOf(['info', 'success', 'error']) // the default alert type used when calling this.props.alert.show
transition: PropTypes.oneOf(['fade', 'scale']) // the transition animation
containerStyle: PropTypes.Object // style to be applied in the alerts container
template: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired // the alert template to be used
```

注意位置、类型和过渡字符串作为常数可用,然后可以导入:

```js
import { positions, transitions, types } from 'react-alert'
```

并且具有这样的价值:

```js
export const positions = {
  TOP_LEFT: 'top left',
  TOP_CENTER: 'top center',
  TOP_RIGHT: 'top right',
  MIDDLE_LEFT: 'middle left',
  MIDDLE: 'middle',
  MIDDLE_RIGHT: 'middle right',
  BOTTOM_LEFT: 'bottom left',
  BOTTOM_CENTER: 'bottom center',
  BOTTOM_RIGHT: 'bottom right'
}

export const types = {
  INFO: 'info',
  SUCCESS: 'success',
  ERROR: 'error'
}

export const transitions = {
  FADE: 'fade',
  SCALE: 'scale'
}
```

缺省情况如下:

```js
offset: '10px'
position: positions.TOP_CENTER
timeout: 0
type: types.INFO
transition: transitions.FADE,
containerStyle: {
  zIndex: 100
}
```

这些选项将适用于所有提醒(请也查看 [边框](https://npmcn.com/package/%40blaumaus/react-alert/#readme-showing-alerts-in-different-positions-at-the-same-time)(中文(简体) )

## 阿庇语Name

拿到钱之后 `alert` 与 `useAlert` 钩子,这是你可以做的:

```js
// show
const alert = alert.show('Some message', {
  timeout: 2000, // custom timeout just for this one alert
  type: 'success',
  onOpen: () => {
    console.log('hey')
  }, // callback that will be executed after this alert open
  onClose: () => {
    console.log('closed')
  } // callback that will be executed after this alert is removed
})

// info
// just an alias to alert.show(msg, { type: 'info' })
const alert = alert.info('Some info', {
  timeout: 2000, // custom timeout just for this one alert
  onOpen: () => {
    console.log('hey')
  }, // callback that will be executed after this alert open
  onClose: () => {
    console.log('closed')
  } // callback that will be executed after this alert is removed
})

// success
// just an alias to alert.show(msg, { type: 'success' })
const alert = alert.success('Some success', {
  timeout: 2000, // custom timeout just for this one alert
  onOpen: () => {
    console.log('hey')
  }, // callback that will be executed after this alert open
  onClose: () => {
    console.log('closed')
  } // callback that will be executed after this alert is removed
})

// error
// just an alias to alert.show(msg, { type: 'error' })
const alert = alert.error('Some error', {
  timeout: 2000, // custom timeout just for this one alert
  onOpen: () => {
    console.log('hey')
  }, // callback that will be executed after this alert open
  onClose: () => {
    console.log('closed')
  } // callback that will be executed after this alert is removed
})

// remove
// use it to remove an alert programmatically
alert.remove(alert)

// removeAll
// use it to remove all alerts programmatically
alert.removeAll()
```

## 使用自定义提醒模板

如果你需要一个警报 就像你想要的, 你可以提供自己的模板! 这里有一个简单的例子:

```js
import React from 'react'
import { render } from 'react-dom'
import { Provider as AlertProvider } from 'react-alert'
import App from './App'

// the style contains only the margin given as offset
// options contains all alert given options
// message is the alert message
// close is a function that closes the alert
const AlertTemplate = ({ style, options, message, close }) => (
  <div style={style}>
    {options.type === 'info' && '!'}
    {options.type === 'success' && ':)'}
    {options.type === 'error' && ':('}
    {message}
    <button onClick={close}>X</button>
  </div>
)

const Root = () => (
  <AlertProvider template={AlertTemplate}>
    <App />
  </AlertProvider>
)

render(<Root />, document.getElementById('root'))
```

放松点,对吧?

## 使用组件作为信息

也可以通过一个组件作为信息,像这样:

```js
alert.show(<div style={{ color: 'blue' }}>Some Message</div>)
```

## 同时在不同位置显示提示

首先,如果需要区分显示不同提示的逻辑 同时在一个项目和项目中使用多个警报器是可能的 筑巢过DOM树. 也可以使用不同的上下文来获取引用 分别对每种类型的警报.

```js
import React, { createContext } from 'react'
import { render } from 'react-dom'
import { useAlert, positions, Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'

const TopRightAlertContext = createContext()

const App = () => {
  const alert = useAlert()
  const topRightAlert = useAlert(TopRightAlertContext)

  return (
    <div>
      <button onClick={() => alert.show('Oh look, an alert!')}>
        Show Alert
      </button>
      <button
        onClick={() =>
          topRightAlert.show('Oh look, an alert in the top right corner!')
        }
      >
        Show Top Right Alert
      </button>
    </div>
  )
}

const Root = () => (
  <AlertProvider template={AlertTemplate}>
    <AlertProvider
      template={AlertTemplate}
      position={positions.TOP_RIGHT}
      context={TopRightAlertContext}
    >
      <App />
    </AlertProvider>
  </AlertProvider>
)

render(<Root />, document.getElementById('root'))
```

另一个用例是,当你不想 筑巢几个警报员 因为它会不知何故地使警报管理复杂化(例如,当你 需要显示三个以上不同位置的警报).

在此情况下,您可以直接将位置传递至警报. 警报没有 个人位置财产将取自提供方. 相反,将立场传给方法 `show`, (中文(简体) ), `success`, (中文(简体) ), `info`, (中文(简体) ), `error` 将 与提供方的立场重叠.

移交财产 `position` 看起来像这样:

```js
alert.show('Oh look, an alert!', { position: positions.BOTTOM_LEFT })
```

在三个不同位置同时显示警报的一个例子:

```js
import React from 'react'
import { render } from 'react-dom'
import {
  Provider as AlertProvider,
  useAlert,
  positions,
  transitions
} from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'

const alertOptions = {
  offset: '25px',
  timeout: 3000,
  transition: transitions.SCALE
}

const App = () => {
  const alert = useAlert()

  const showAlert = () => {
    alert.show('Oh look, an alert!', { position: positions.BOTTOM_LEFT }) //alert will be shown in bottom left
    alert.show('Oh look, an alert!', { position: positions.BOTTOM_RIGHT }) //alert will be shown in bottom right
    alert.show('Oh look, an alert!') //alert will use the Provider's position `top right`
  }

  return <button onClick={showAlert}>Show Alert</button>
}

const Root = () => (
  <AlertProvider template={AlertTemplate}>
    <AlertProvider
      template={AlertTemplate}
      position={positions.TOP_RIGHT} //default position for all alerts without individual position
      {...alertOptions}
    >
      <App />
    </AlertProvider>
  </AlertProvider>
)

render(<Root />, document.getElementById('root'))
```

## 常见问题

### @blaumaus/react-alert 是什么？

简单的反应提醒组件

### 如何安装 @blaumaus/react-alert？

在项目目录运行 npm install @blaumaus/react-alert，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.8\.1 \|\| ^17 \|\| ^18）、react-dom（^16\.8\.1 \|\| ^17 \|\| ^18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @blaumaus/react-alert 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/blaumaus\_\_react-alert 是否存在。

### @blaumaus/react-alert 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @blaumaus/react-alert 可以商用吗？

@blaumaus/react-alert 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @blaumaus/react-alert 的下载量有多少？

根据 npm 官方下载统计，@blaumaus/react-alert 在 2026/10/09 – 2026/11/07 这 30 天内被下载 6,186 次，日均约 206 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @blaumaus/react-alert 还在维护吗？

最新版本 7\.0\.7 发布于 2024/05/27（2 年前）；至今共发布 4 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/04/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。