react-confirm
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, react-bootstrap and material-ui are used with.
Motivation
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.
What you can do
With this library,
- 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).
Demo
https://codesandbox.io/s/react-confirm-with-react-bootstrap-kjju1
Versions
- React 18+ users should use
react-confirm
version 0.2.x - React <=17 users should stick to
react-confirm
version 0.1.x
Usage
- create your dialog component.
- apply
confirmable
to your component (optional, but usually recommended). - create function with
createConfirmation
by passing your confirmable component. - call it!
create confirmable component
import React from 'react';
import PropTypes from 'prop-types';
import { confirmable } from 'react-confirm';
import Dialog from 'any-dialog-library';
const YourDialog = ({show, proceed, confirmation, options}) => (
<Dialog onHide={() => proceed(false)} show={show}>
{confirmation}
<button onClick={() => proceed(false)}>CANCEL</button>
<button onClick={() => proceed(true)}>OK</button>
</Dialog>
)
YourDialog.propTypes = {
show: PropTypes.bool,
proceed: PropTypes.func,
confirmation: PropTypes.string,
options: PropTypes.object
}
export default confirmable(YourDialog);
@confirmable
class YourDialog extends React.Component {
}
create confirm function
import { createConfirmation } from 'react-confirm';
import YourDialog from './YourDialog';
export const confirm = createConfirmation(YourDialog);
export function confirmWrapper(confirmation, options = {}) {
return confirm({ confirmation, options });
}
use it!
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'
const handleOnClick = async () => {
if (await confirm({
confirmation: 'Are you sure?'
})) {
console.log('yes');
} else {
console.log('no');
}
}
const handleOnClick2 = async () => {
if (await confirmWrapper('Are your sure?')) {
console.log('yes');
} else {
console.log('no');
}
}
You can check more complex example in codesandbox
typescript
Experimentally added full typescript declaration files at typescript
branch.
see typescript example.
and try npm install git@github.com:haradakunihiko/react-confirm.git#typescript
to use in your project.