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

1.0.4 • Public • Published

ReactConfirmDecorator

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-confirm-decorator

Install

yarn add react-confirm-decorator

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-confirm-decorator';

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-confirm-decorator';

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

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:

Readme

Keywords

Package Sidebar

Install

npm i react-confirm-decorator

Weekly Downloads

28

Version

1.0.4

License

MIT

Unpacked Size

42.7 kB

Total Files

38

Last publish

Collaborators

  • uraway