Nefarious Planetary Meddling

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

    1.2.2 • Public • Published

    react-confirm-pro

    Dialog callable component for React Live demo|Examples

    Maintenance Status npm version npm downloads Build Status

    Getting started

    Install with NPM:

    $ npm install react-confirm-pro --save
    

    Install with Yarn:

    $ yarn add react-confirm-pro
    

    Options

    Attribute Type Default Description
    duration number 0.4 Animation duration.
    delay number 0.2 Animation body delay
    animate {
    in?: string;
    out?: string;
    }
    {
    in: "animate_fadeIn",
    out: "animate_fadeOut"
    }
    For using custom in/out animation read the guide on Animate.css
    in: on Enter animation
    out: on Leave animation
    className string - Container className
    onClickOutside () => void - Outside handler
    closeOnClickOutside boolean true Outside check
    keyboardEvents {
    escape?: boolean;
    submit?: boolean;
    }
    {
    escape: true;
    submit: false
    }
    Keyboard events
    customUI ({
    onClose?: () => void;
    onCancel: () => void;
    onSubmit: () => void;
    }) => React.ReactNode;
    - Custom Ui component
    body React.ReactNode[] - Body content components
    buttons ({
    onClose?: () => void;
    onCancel: () => void;
    onSubmit: () => void;
    }) => React.ReactNode[];
    - Action buttons
    title string
    React.ReactNode
    - Component title
    description string
    React.ReactNode
    - Component description
    onSubmit () => void; - Submit action
    onCancel () => void; - Cancel action
    closeButton React.ReactNode - Close icon
    type light
    dark
    light Style type
    btnCancel string Cancel Cancel button label
    btnSubmit string Submit Submit button label

    Code examples

    Other examples

    Default example:

    import React from 'react';
    import ReactDOM from 'react-dom'
    import { onConfirm } from 'react-confirm-pro';
    
    function ReactConfirmProDemo() {
      const onClickLight = () => {
        onConfirm({
          title: (
            <h3>
              Are you sure?
            </h3>
          ),
          description: (
            <p>Do you really want to delete this records? This process cannot be undone.</p>
          ),
          onSubmit: () => {
            alert("Submit")
          },
          onCancel: () => {
            alert("Cancel")
          },
        })
      };
      return (
        <button type="button" onClick={onClick}>Click</button>
      );
    }
    
    const rootEl = document.getElementById('root')
    ReactDOM.render(<ReactConfirmProDemo />, rootEl)

    Custom UI:

    import React from 'react';
    import ReactDOM from 'react-dom'
    import { onConfirm } from 'react-confirm-pro';
    
    const CustomUI = ({
      onSubmit,
      onCancel
    }) => (
      <div className="custom-ui">
        <h3>Are you sure?</h3>
        <p>Do you really want to delete this records? This process cannot be undone.</p>
        <div>
          <button onClick={onSubmit}>Yes</button>
          <button onClick={onCancel}>No</button>
        </div>
      </div>
    )
    
    function ReactCustomUIDemo() {
      const onClick = () => {
        onConfirm({
          onSubmit: () => {
            alert("Submit")
          },
          onCancel: () => {
            alert("Cancel")
          },
          customUI: CustomUI,
          className: "my-custom-ui-container"
        })
      };
      return (
    	  <button onClick={onClick}>Click</button>
      );
    }
    
    const rootEl = document.getElementById('root')
    ReactDOM.render(<ReactConfirmProDemo />, rootEl)

    Install

    npm i react-confirm-pro

    DownloadsWeekly Downloads

    3

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    108 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar