A react component confirm dialog. (一个 react 的弹窗组件,支持 alert、confirm)

在线预览 CodeSandbox

Installing

yarn add react-alert-confirm
// or
npm install react-alert-confirm --save

Import

import 'react-alert-confirm/dist/index.css';
import alertConfirm from 'react-alert-confirm';

Example

Confirm

import alertConfirm, { confirm } from 'react-alert-confirm';

const [isOk] = await alertConfirm('Content');
if (isOk) {
  console.log('ok');
}
// or
confirm('Content');
// or
alertConfirm({
  title: 'Title',
  content: 'Content',
  onOk: () => {
    console.log('ok');
  },
  onCancel: () => {
    console.log('cancel');
  }
});

Alert

import alertConfirm, { alert } from 'react-alert-confirm';

alertConfirm.alert('Content');
// or
alert('Content');
// or
alertConfirm({
  type: 'Title',
  content: 'Content'
});

Options

属性 说明 类型 默认值
type 弹窗的类型 'confirm' | 'alert' 'confirm'
title 弹窗标题 string | ReactNode -
content 弹窗内容 string | ReactNode -
footer 弹窗底部,用于自定义底部按钮 ReactNode | dispatch => React.ReactNode 确认、取消按钮
lang 默认按钮的语言 'zh' | 'en' 'zh'
zIndex 弹层的 z-index number 1000
okText 确认按钮的文字 string | ReactNode 确认/OK
cancelText 取消按钮的文字 string | ReactNode 取消/Cancel
className 对话框的 className string -
maskClassName 遮罩的 className string -
containerClassName 大容器的 className string -
style 对话框的样式 CSSProperties -
maskStyle 遮罩的样式 CSSProperties -
maskClosable 点击遮罩可关闭 boolean false
onOk 点击确认的回调 function(e) -
onCancel 点击取消或者关闭弹窗的回调 function(e) -
closeBefore 关闭弹窗之前的回调,调用 close 关闭弹窗 function(action, close) -

Advanced

更多自定义用法

自定义 Footer,并提供按钮组件便于样式统一

import alertConfirm, { Button } from 'react-alert-confirm';

const [isOk, action, instance] = await alertConfirm({
  title: '警告',
  content: '此操作将删除该任务,请确认!',
  footer(dispatch) {
    return (
      <>
        <Button onClick={() => dispatch('ok')}>OK</Button>
        <Button onClick={() => dispatch('no')} styleType="primary">
          NO
        </Button>
      </>
    );
  },
  async closeBefore(action, close) {
    if (action === 'no') {
      await alert('Click NO');
      close();
    } else {
      close();
    }
  }
});
console.log(isOk, action, instance);

Return Values

const [isOk, action] = await alert('Alert info');
属性 说明 类型
isOk 是否点击的确认 booleal
action 选择的 action string

Custom

Languages

设置全局语言

import alertConfirm from 'react-alert-confirm';

alertConfirm.config({
  lang: 'en'
});

alertConfirm.config(); // Get current config

Other config

属性 说明 类型 默认值
lang 默认按钮的语言 'zh' | 'en' 'zh'
zIndex 弹层的 z-index number 1000
okText 确认按钮的文字 string | ReactNode 确认/OK
cancelText 取消按钮的文字 string | ReactNode 取消/Cancel
closeBefore 关闭弹窗之前的回调,调用 close 关闭弹窗 function(action, close) -
import alertConfirm from 'react-alert-confirm';

alertConfirm.config({
  lang: 'en',
  zIndex: 1024,
  okText: 'YES',
  cancelText: 'NO',
  closeBefore: (action, close) => {}
});

alertConfirm.config(); // 获取当前配置

destroyAll

import alertConfirm from 'react-alert-confirm';

alertConfirm.destroyAll(); // 销毁全部弹窗

Button

为了自定义按钮时样式统一,增加了 Button 组件。

Props

属性 说明 类型 默认值
styleType 按钮的样式 'default' | 'primary' | 'danger' 'default'

Button 还包含 ButtonHTMLAttributes 所有属性

React Alert Confirm

A react component confirm dialog. (一个react的弹窗组件,支持 alert、confirm)

React Alert Confirm Info

⭐ Stars 17
🔗 Source Code github.com
🕒 Last Update 14 days ago
🕒 Created 3 years ago
🐞 Open Issues 0
➗ Star-Issue Ratio Infinity
😎 Author jaceyi