Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add typescript definition #70

Merged
merged 7 commits into from
Sep 8, 2023
Merged

Add typescript definition #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
208843c
added typescript declaration and example
Jul 20, 2022
73efb22
modified version
haradakunihiko Mar 20, 2023
d364580
typescript定義ファイルを修正
haradakunihiko Aug 9, 2023
1d04879
READMEを修正
haradakunihiko Aug 9, 2023
4071e77
change type name
haradakunihiko Aug 24, 2023
58da18c
modified typescript definition
haradakunihiko Sep 8, 2023
599c7c0
modified version
haradakunihiko Sep 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 8 additions & 10 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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);
Expand All @@ -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.
7 changes: 7 additions & 0 deletions example/ts-react-bootstrap-context/.babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"plugins": ["@babel/plugin-transform-runtime"],
"presets": [
"@babel/preset-env",
"@babel/react"
]
}
3 changes: 3 additions & 0 deletions example/ts-react-bootstrap-context/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
static
node_modules

17 changes: 17 additions & 0 deletions example/ts-react-bootstrap-context/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading