Skip to content

uraway/react-confirmable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Mar 28, 2022
983d287 · Mar 28, 2022
Mar 23, 2022
Jun 10, 2021
Jun 7, 2021
Jun 7, 2021
Jun 2, 2021
Jun 7, 2021
Jun 2, 2021
Jun 7, 2021
Jun 10, 2021
Mar 21, 2018
Jun 3, 2021
Mar 28, 2022
Jun 2, 2021
Mar 28, 2022
Jun 2, 2021
Jun 2, 2021
Jun 10, 2021
Mar 28, 2022

Repository files navigation

ReactConfirmable

npm version uraway

High Order Component for Beautiful React Dialog

This enables any React Dialog component to be callable.

Demo

Jun-07-2021 4-58-12 PM

const isConfirmed = await confirmation({
  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
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import { ReactNode } from 'react';
import { WrappedComponentProps } from 'react-confirmable';

import 'bootstrap/dist/css/bootstrap.min.css';

type Props = {
  title: string,
  body: ReactNode,
};

const BaseModal = ({
  show,
  confirm,
  abort,
  title,
  body,
}: Props & WrappedComponentProps) => (
  <div className="static-modal">
    <Modal show={show} onHide={abort} backdrop>
      <Modal.Header>
        <Modal.Title>{title}</Modal.Title>
      </Modal.Header>
      <Modal.Body>{body}</Modal.Body>
      <Modal.Footer>
        <Button id="cancel" onClick={abort}>
          Cancel
        </Button>
        <Button id="confirm" className="button-l" onClick={confirm}>
          Confirm
        </Button>
      </Modal.Footer>
    </Modal>
  </div>
);
  1. Wrap your Dialog component with withConfirmation:
import { withConfirmation } from 'react-confirmable';

const ConfirmationModal = withConfirmation(BaseModal);
  1. Create confirmation function with createConfirmation. It accepts any props passing to your Dialog component:
import { createConfirmation } from 'react-confirmable';

const confirmation = (props: Props): Promise<boolean> => {
  return createConfirmation(ConfirmationModal, props);
};
  1. Use confirmation. When confirm is fired, it will resolve true. When abort is fired, it will resolve false:
const isConfirmed = await confirmation({
  title: 'Title',
  body: 'Body',
});

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

License

MIT License