Merge pull request #70 from haradakunihiko/typescript-2

Typescript definition
haradakunihiko · Sep 8, 2023 · 8421db1 · 8421db1
2 parents a409257 + 599c7c0
commit 8421db1
Show file tree

Hide file tree

Showing 32 changed files with 16,826 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -79,7 +79,7 @@ export function confirmWrapper(confirmation, options = {}) {
 
 ### Call it!
 Now, you can show dialog just like window.confirm with async-await. The most common example is onclick handler for submit buttons.
- 
+
 ```js
 import { confirmWrapper, confirm } from './confirm'
 
@@ -108,12 +108,12 @@ You can check more complex example in [codesandbox](https://codesandbox.io/s/rea
 ## Using with Context
 By default, this library renders the confirmation dialog without appending the component to your app's React component tree. While this can be useful, it may cause issues if you need to consume context in your component. To overcome this problem, you can use the `MountPoint` component to include your confirmation dialog within your app's tree, enabling it to access context and other data from the app.
 
-Create your own `createConfirmation` using `createConfirmationCreater` and `createReactTreeMounter`.
+Create your own `createConfirmation` function and `MountPoint` Component using `createConfirmationCreater` and `createReactTreeMounter`.
 
 ```js
 import { createConfirmationCreater, createReactTreeMounter, createMountPoint } from 'react-confirm';
 
-const mounter = createReactTreeMounter(); 
+const mounter = createReactTreeMounter();
 
 export const createConfirmation = createConfirmationCreater(mounter);
 export const MountPoint = createMountPoint(mounter);
@@ -139,20 +139,18 @@ export const confirm = createConfirmation(YourDialog);
 To render the confirmation dialog within the React component tree but in a different part of the DOM, you can pass a DOM element to the `createReactTreeMounter` function. This will use the `createPortal` method to render the confirmation dialog in the specified DOM element while keeping it within the React component tree.
 
 ```js
-const mounter = createReactTreeMounter(document.body); 
+const mounter = createReactTreeMounter(document.body);
 ```
 
 ### example
 Context example with Chakra-ui in [codesandbox](https://codesandbox.io/s/react-confirm-with-chakra-ui-oidpf1)
 
-## typescript
-Experimentally added typescript declaration files at `typescript` branch.
-
-see [typescript example](https://github.com/haradakunihiko/react-confirm/tree/typescript/example/ts-react-bootstrap).
+## typescript usage
+Below, we present two possible ways to define a confirmation dialog component using react-confirm. You can choose either based on your preference.
 
 ```ts
-const Confirmation1: React.FC<ReactConfirmDialogProps<Props, Response>> = (props) => (<Dialog></Dialog>)
+const Confirmation1: React.FC<ConfirmDialogProps<Props, Response>> = (props) => (<Dialog></Dialog>)
 const Confirmation2: ConfirmDialog<Props, Response> = (props) => (<Dialog></Dialog>)
 ```
 
-and try `npm install git+ssh://[email protected]:haradakunihiko/react-confirm.git#typescript` to use in your project.
+Ensure to specify both the dialog component's `Props` and the response value `Response` when using these types. These typings will be especially useful when defining functions to display the dialog.
diff --git a/example/ts-react-bootstrap-context/.babelrc b/example/ts-react-bootstrap-context/.babelrc
@@ -0,0 +1,7 @@
+{
+  "plugins": ["@babel/plugin-transform-runtime"],
+  "presets": [
+    "@babel/preset-env",
+    "@babel/react"
+  ]
+}
diff --git a/example/ts-react-bootstrap-context/.gitignore b/example/ts-react-bootstrap-context/.gitignore
@@ -0,0 +1,3 @@
+static
+node_modules
+
diff --git a/example/ts-react-bootstrap-context/index.html b/example/ts-react-bootstrap-context/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>react-confirm with react-bootstrap example</title>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <div id="root" />
+    <script src="/bundle.js"></script>
+  </body>
+</html>