ReactConfirmable

High Order Component for Beautiful React Dialog

This enables any React Dialog component to be callable.

Demo

constisConfirmed=awaitconfirmation({title: 'Title',body: 'Body',});

https://uraway.github.io/react-confirmable

Install

yarn add react-confirmable

How to make your Dialog component to be callable

1. Create your Dialog component:

WrappedComponentProps has following properties:

• show: if true, modal will open
• confirm: callback function which closes modal, returns true
• abort: callback function which closes modal, returns false

importModalfrom'react-bootstrap/Modal';importButtonfrom'react-bootstrap/Button';import{ReactNode}from'react';import{WrappedComponentProps}from'react-confirmable';import'bootstrap/dist/css/bootstrap.min.css';typeProps={title: string,body: ReactNode,};constBaseModal=({
show,
confirm,
abort,
title,
body,}: Props&WrappedComponentProps)=>(<divclassName="static-modal"><Modalshow={show}onHide={abort}backdrop><Modal.Header><Modal.Title>{title}</Modal.Title></Modal.Header><Modal.Body>{body}</Modal.Body><Modal.Footer><Buttonid="cancel"onClick={abort}>
Cancel
</Button><Buttonid="confirm"className="button-l"onClick={confirm}>
Confirm
</Button></Modal.Footer></Modal></div>);

2. Wrap your Dialog component with withConfirmation:

import{withConfirmation}from'react-confirmable';constConfirmationModal=withConfirmation(BaseModal);

3. Create confirmation function with createConfirmation. It accepts any props passing to your Dialog component:

import{createConfirmation}from'react-confirmable';constconfirmation=(props: Props): Promise<boolean>=>{returncreateConfirmation(ConfirmationModal,props);};

4. Use confirmation. When confirm is fired, it will resolve true. When abort is fired, it will resolve false:

constisConfirmed=awaitconfirmation({title: 'Title',body: 'Body',});

Check more examples with Chakra UI, Material UI and React Bootstrap:

License

MIT License