react-moised v1.1.0

React Moised

React + Modal + Promises = <3

Installation

yarn add react-moised

Live demo

A demo is worth a thousand words

How to use

1. Put the Moised provider in your equivalent App.js file.

import React from 'react'
import { Moised } from 'react-moised'

function App() {
  return (
    <div>
      <Moised />
    </div>
  )
}

2. Create you own modal

import React from 'react'
import { withMoised } from 'react-moised'

function Dialog(props) {
  return (
    <>
      <button onClick={props.onSubmit}>Submit</button>
      <button onClick={props.onDismiss}>Dismiss</button>
    </>
  )
}

and export wrapping with withMoised method:

export default () => withMoised(Dialog)

Note: It's possible to export Dialog waiting for props when called as below:

export default (props) => withMoised(Dialog, props)

3. And that's it, use anywhere as promise:

import React from 'react'
import Dialog from './Dialog'

function Homepage() {
  const handleDialog = async () => {
    const confirmed = await Dialog()

    if (confirmed) console.log('confirmed')
  }

  return (
    <div>
      <button onClick={handleDialog}>Dialog</button>
    </div>
  )
}