haradakunihiko

react-confirm

  "description": "Small library which makes your Dialog component callable",

    "url": "https://github.com/haradakunihiko/react-confirm.git"

    "url": "https://github.com/haradakunihiko/react-confirm/issues"

  "homepage": "https://github.com/haradakunihiko/react-confirm",

    "prepublish": "npm run clean && npm run build",

Small library which makes your Dialog component callable.

This library does not provide any view component. Just adds a functionality to be callable like `window.confirm`.

In the [example](https://github.com/haradakunihiko/react-confirm/tree/master/example), [react-bootstrap](https://react-bootstrap.github.io/components.html#modals) and [material-ui](http://www.material-ui.com/#/components/dialog) are used with.

[![npm version](https://badge.fury.io/js/react-confirm.svg)](https://badge.fury.io/js/react-confirm)

 React is great. And I respect the concept to render the view reactively only by it's state. However, it easily becomes really complex to manage all states which are only needed just temporarily like confirmation dialog. The question is... Is it worth to manage them inside your app? I guess the answer is not always yes.

 - You can open a dialog component by calling function and it will be rendered outside your application. The function returns promise so that you can define callbacks to handle the confirmation result.

 - You can pass arguments to the function and use them inside the dialog component.

 - You can get values from the component in the promise.

 - There is no limitation in the dialog. You can use input forms, multiple buttons, whatever you want (see demo site).

https://codesandbox.io/s/react-confirm-with-react-bootstrap-kjju1

- React 18+ users should use `react-confirm` version 0.2.x

- React <=17 users should stick to `react-confirm` version 0.1.x

2. apply `confirmable` to your component (optional, but usually recommended).

3. create function with `createConfirmation` by passing your confirmable component.

import { confirmable } from 'react-confirm';

import Dialog from 'any-dialog-library'; // your choice.

const YourDialog = ({show, proceed, confirmation, options}) => (

  <Dialog onHide={() => proceed(false)} show={show}>

    <button onClick={() => proceed(false)}>CANCEL</button>

    <button onClick={() => proceed(true)}>OK</button>

  show: PropTypes.bool,            // from confirmable. indicates if the dialog is shown or not.

  proceed: PropTypes.func,         // from confirmable. call to close the dialog with promise resolved.

  confirmation: PropTypes.string,  // arguments of your confirm function

  options: PropTypes.object        // arguments of your confirm function

// confirmable HOC pass props `show`, `dismiss`, `cancel` and `proceed` to your component.

class YourDialog extends React.Component {

import { createConfirmation } from 'react-confirm';

export const confirm = createConfirmation(YourDialog);

// This is optional. But wrapping function makes it easy to use.

export function confirmWrapper(confirmation, options = {}) {

  return confirm({ confirmation, options });

Now, you can show dialog just like window.confirm with async-await. The most common example is onclick handler for submit buttons.

import { confirmWrapper, confirm } from './confirm'

  if (await confirmWrapper('Are your sure?')) {

Experimentally added full typescript declaration files at `typescript` branch.

see [typescript example](https://github.com/haradakunihiko/react-confirm/tree/typescript/example/ts-react-bootstrap).

and try `npm install git@github.com:haradakunihiko/react-confirm.git#typescript` to use in your project.

		{
		"name": "react-confirm",
		"version": "0.2.3",
		"version": "0.2.4",
		"description": "Small library which makes your Dialog component callable",
		@@ -5,0 +5,0 @@ "main": "lib/index.js",

		@@ -111,1 +111,9 @@ # react-confirm


		## typescript

		Experimentally added full typescript declaration files at `typescript` branch.

		see [typescript example](https://github.com/haradakunihiko/react-confirm/tree/typescript/example/ts-react-bootstrap).

		and try `npm install git@github.com:haradakunihiko/react-confirm.git#typescript` to use in your project.

Improved metrics