react-confirm 0.3.0-7 → 0.3.0

package/README.md

@@ -32,29 +32,27 @@ react-confirm library offers several benefits:
 
 ### Create your dialog component and Apply `confirmable` HOC to your component.
 
-```js
-import React from 'react';
-import PropTypes from 'prop-types';
-import { confirmable } from 'react-confirm';
-import Dialog from 'any-dialog-library'; // your choice.
+```ts
+import * as React from 'react';
+
+import Modal from 'react-bootstrap/Modal'
+import Button from 'react-bootstrap/Button'
+
+import { confirmable, ConfirmDialog } from 'react-confirm';
 
-const YourDialog = ({show, proceed, confirmation, options}) => (
+export interface Props {
+  confirmation?: string;
+};
+
+const Confirmation: ConfirmDialog<Props, boolean> = ({show, proceed, confirmation}) => (
   <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,            // 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.
-export default confirmable(YourDialog);
+export default confirmable(Confirmation);
 ```
 
 ### Create a function using `createConfirmation`
@@ -64,11 +62,6 @@ import YourDialog from './YourDialog';
 
 // create confirm function
 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 });
-}
 ```
 
 ### Call it!
@@ -87,14 +80,6 @@ const handleOnClick = async () => {
   }
 }
 
-const handleOnClick2 = async () => {
-  if (await confirmWrapper('Are your sure?')) {
-    console.log('yes');
-  } else {
-    console.log('no');
-  }
-}
-
 ```
 
 You can check more complex example in [codesandbox](https://codesandbox.io/s/react-confirm-with-react-bootstrap-kjju1)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-confirm",
-  "version": "0.3.0-7",
+  "version": "0.3.0",
   "description": "Small library which makes your Dialog component callable",
   "main": "lib/index.js",
   "repository": {
@@ -30,8 +30,8 @@
   "author": "",
   "license": "MIT",
   "peerDependencies": {
-    "react": "18.x",
-    "react-dom": "18.x"
+    "react": ">=18.x",
+    "react-dom": ">=18.x"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
@@ -44,8 +44,8 @@
     "babel-jest": "^29.5.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
     "regenerator-runtime": "^0.13.11",
     "rimraf": "^3.0.2"
   },

package/typescript/index.d.ts

@@ -9,9 +9,13 @@ type ConfirmableProps<P, R> = {
 type ConfirmableDialog<P, R> = React.ComponentType<ConfirmableProps<P, R>>;
 
 export type ConfirmDialogProps<P, R> = {
+  /** Dismiss dialog without resolving the promise. */
   dismiss: () => void;
+  /** Resolve the promise with the given value. */
   proceed: (value: R) => void;
+  /** Reject the promise with the given value. */
   cancel: (value?: any) => void;
+  /** Indicates if the dialog should be shown aka. someone is waiting for a promise. */
   show: boolean;
 } & P;