cf-dialog-box

Made with create-react-library

Install

npm install --save cf-dialog-box

Usage

import React, { useEffect } from 'react';
import { DialogBox } from 'cf-dialog-box';
import 'cf-dialog-box/dist/index.css';

const App = () => {

  const onClickInfo = () => {
    DialogBox({ 
      type: 'question',
      title:"Are you sure you want to delete file?",
      text:"This operation cannot be reversed!",
      showCancelButton:true,
      showConfirmButton:true,
      cancelButtonLabel:"Cancel",
      confirmButtonLabel:"Yes!",
      closeButtonLabel:"Close",
      cancelButtonClassName:"",
      confirmButtonClassName:"",
      closeButtonClassName:"",

      // renderHTML:()=>{ return <h1>Rendering HTML</h1> }

    })
      .then(confirmed => {
        if (confirmed) {
          DialogBox({ type: 'success',title:"File Deleted successfully!" })
        } else {
          DialogBox({ type: 'info',title:"Cancelled. File not deleted" })
        }
      })
  }
  return <div>

    <button onClick={onClickInfo} className=''>Show question </button>
    <button onClick={() => DialogBox({ type: 'success',title:"Success message" })} className=''>Show success </button>
    <button onClick={() => DialogBox({ type: 'error',title:"Error message" })} className=''>Show error </button>
    <button onClick={() => DialogBox({ type: 'info' ,title:"Info message"})} className=''>Show info </button>
    <button onClick={() => DialogBox({ type: 'warning',title:"Warning message" })} className=''>Show warning </button>

  </div>;
};

export default App;

License

MIT © Arnoldkhosa