Skip to content

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

License

Notifications You must be signed in to change notification settings

jaceyi/react-alert-confirm

Repository files navigation

react-alert-confirm

A react component confirm dialog, support async/await mode call(一个 React 确认对话框组件,支持 async/await 方式调用)

NPM version npm download Github react-alert-confirm

Docs

Documentation pages(在线文档)

Preview on CodeSandbox(在线预览)

Installing

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

Usage

import 'react-alert-confirm/lib/style.css';
import AlertConfirm from 'react-alert-confirm';

Imperative

import AlertConfirm from 'react-alert-confirm';

const openConfirm = async () => {
  const [isOk] = await AlertConfirm('Are you sure?');
  if (isOk) {
    console.log('ok');
  }
};

const openConfirm2 = () => {
  AlertConfirm({
    title: 'Are you sure?',
    desc: 'description...',
    onOk: () => {
      console.log('ok');
    },
    onCancel: () => {
      console.log('cancel');
    }
  });
};

const openAlert = async () => {
  await AlertConfirm.alert('Are you sure?');
  console.log('ok');
};

const openAlert2 = async () => {
  await AlertConfirm.alert({
    title: 'Are you sure?',
    desc: 'description...'
  });
  console.log('ok');
};

Render JSX

import React, { useState } from 'react';
import AlertConfirm from 'react-alert-confirm';

const Component = () => {
  const [visible, setVisible] = useState(true);

  return (
    <AlertConfirm
      visible={visible}
      title="Are you sure?"
      desc="description..."
      onOk={() => {
        console.log('ok');
        setVisible(false);
      }}
    />
  );
};