Nanananananananana.. Pat Man!

    react-confirm-alert
    TypeScript icon, indicating that this package has built-in type declarations

    2.7.0 • Public • Published

    react-confirm-alert

    react component confirm dialog. Live demo

    npm version

    Document for v.1.x.x see

    Getting started

    Install with NPM:

    $ npm install react-confirm-alert --save
    

    Options

    const options = {
      title: 'Title',
      message: 'Message',
      buttons: [
        {
          label: 'Yes',
          onClick: () => alert('Click Yes')
        },
        {
          label: 'No',
          onClick: () => alert('Click No')
        }
      ],
      childrenElement: () => <div />,
      customUI: ({ onClose }) => <div>Custom UI</div>,
      closeOnEscape: true,
      closeOnClickOutside: true,
      willUnmount: () => {},
      afterClose: () => {}
      onClickOutside: () => {},
      onKeypressEscape: () => {},
      overlayClassName: "overlay-custom-class-name"
    };
    
    confirmAlert(options);

    Use with function:

    import { confirmAlert } from 'react-confirm-alert'; // Import
    import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
    
    class App extends React.Component {
      submit = () => {
        confirmAlert({
          title: 'Confirm to submit',
          message: 'Are you sure to do this.',
          buttons: [
            {
              label: 'Yes',
              onClick: () => alert('Click Yes')
            },
            {
              label: 'No',
              onClick: () => alert('Click No')
            }
          ]
        });
      };
    
      render() {
        return (
          <div className='container'>
            <button onClick={this.submit}>Confirm dialog</button>
          </div>
        );
      }
    }

    Custom UI Component

    confirmAlert({
      customUI: ({ onClose }) => {
        return (
          <div className='custom-ui'>
            <h1>Are you sure?</h1>
            <p>You want to delete this file?</p>
            <button onClick={onClose}>No</button>
            <button
              onClick={() => {
                this.handleClickDelete();
                onClose();
              }}
            >
              Yes, Delete it!
            </button>
          </div>
        );
      }
    });

    Install

    npm i react-confirm-alert

    DownloadsWeekly Downloads

    21,466

    Version

    2.7.0

    License

    MIT

    Unpacked Size

    17.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar