react-async-popup's Introduction

react-async-popup

A 1kb promise based popup (confirm and modal) library for react, to reduce extra state management needed for popups. checkout the docs here - https://aadil.dev/react-async-popup

Install

npm install --save react-async-popup

yarn add react-async-popup

Usage

With Hooks -

import React from 'react'
import { useConfirm } from 'react-async-popup'

export default function App() {
  const [showConfirm] = useConfirm({
    title: 'Are you sure ?'
  })

  const openConfirm = async () => {
    const result = await showConfirm()

    if (result === true) {
      console.log('I am sure')
    } else {
      console.log('not sure')
    }
  }

  return <button onClick={openConfirm}> Open Confirm </button>
}

Without Hooks -

import React from 'react'

import { Confirm } from 'react-async-popup'

function App() {
  const onDelete = async () => {
    const { show } = await Confirm.new()

    const result = await show({
      title: ' Are you sure you want to delete the file ?'
    })

    if (result === true) {
      console.log(' Yes, Delete the file ')
    } else {
      console.log(" Don't delete ")
    }
  }

  return <button onClick={openConfirm}> Open Confirm </button>
}

Find more examples here - https://aadil.dev/react-async-popup/examples

License

MIT © aadilhasan

react-async-popup's People

Contributors

Stargazers

Watchers

react-async-popup's Issues

How to pass props component in custom Modal

If I were to use Modal.new and put a content of a custom component, how do I pass along props to that component? Thanks!

A ton of empty divs

I was trying out this package, and the page I added a popup to seems to have a ton of empty <div> elements in the DOM. This screenshot is the DOM while the popup hasn't been opened yet.