https://github.com/fsubal/react-async-dialog

await dialog.alert(<YourComponent />) out of the box
https://github.com/fsubal/react-async-dialog

Last synced: 16 days ago
JSON representation

await dialog.alert(<YourComponent />) out of the box

• Host: GitHub
• URL: https://github.com/fsubal/react-async-dialog
• Owner: fsubal
• Created: 2019-11-11T13:04:57.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T12:52:49.000Z (almost 2 years ago)
• Last Synced: 2024-10-03T04:21:01.133Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 1.54 MB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 22
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-async-dialog

Yes, you can do `await dialog.alert()` out of the box!

```

npm install react-async-dialog

```

```

yarn add react-async-dialog

```

![storybook.png](./README/storybook.png)

### Why?

[React](https://github.com/facebook/react) provides a first-class way to use [Portals](https://reactjs.org/docs/portals.html), which makes modals easy to create.

But sometimes, you want a modal window that interferes your event handlers.

```jsx

if (

  await dialog.confirm(

    <>

      Are you REALLY sure?

    >

  )

) {

  console.log("Ok, you are so sure!")

}

```

This library gives you this behavior out of the box!

### How to use

```jsx

import { DialogProvider, useDialog } from "react-async-dialog"

function YourApp({ save }) {

  const dialog = useDialog()

  const onSave = async e => {

    e.preventDefault()

    const ok = await dialog.confirm(Are you sure???, {

      ok: "YES!!!"

    })

    if (!ok) {

      return

    }

    save()

  }

  return SAVE ME

}

ReactDOM.render(

  

    

  ,

  root

)

```

### Polyfills

`react-async-dialog` requires `Promise`.