API

react-async-popup provides following modules -

Modal
Confirm
useModal
useConfirm

To use Modal or Confirm, then new method of it must be called.

Hooks function and new method both take an optional configuration object as its first parameter.

const callbacks = await Confirm.new(optionalConfig)

const [show, destroy] = useConfirm(optionalConfig)

new method

The new method returns a promise, which gets resolved with an object, this object has two methods show and destroy.

const { show, destroy } = await Confirm.new(config)

const { show, destroy } = await Modal.new(config)

show method opens the popup
destroy method destroys the instance and show method will work no more

new method takes a config object as parameter which can have following values -

Tables	type	default	description
popupStyle	React.CSSProperties		additional style for popup
okText	string	Ok	text for ok button
cancelText	string	Cancel	text for cancel button
maskClosable	boolean	for Modal - true and for Confirm - false	whether close popup on mask/background click
closable	boolean	false	if true cancel buttons will be hidden and closeOnEscape will be false
closeOnEscape	boolean	true	whether close popup on escape press
wrapClassName	string		class for popup container
aria	`{labelledby: string, describedby: string}`	`{labelledby: 'react-async-popup-header', describedby: 'react-async-popup-content'}`	element ID's for accessibility
destroyOnClose	boolean	true	whether to destroy the popup instance on close
container	HTMLElement		html element where popup should mount

Provided content and footer components in the config object will receive `ok` and `cancel` callback methods as props/parameter. The value provided to these methods will be used to resolve the promise returned by show method. Example

hooks

If you want to use modal or confirm in a functional component use hooks. If you don't know what hooks are and how they work please visit React Hooks Intro.

How to use -

const [show, destroy] = useConfirm(config)

A hook takes a config object as its first parameter which is same config as new method , a hook returns an array which has two methods show and destroy.

One thing to note here is before the popup is ready to use value of show and destroy will be null. So in case you want to show popup on mount of the component make sure you add a null check.

show method opens the popup
destroy method destroys the instance and show method will work no more

Example

show method

Makes the popup visible to the user, it returns a promise. By default this promise resolves with true on ok and with false on cancel.

show method also takes a config object as perameter, the config is same as new method config just destroyOnClose and container properties are not available here .

Value of show parameter can override the initial values given to the new method, this is really usefull when developer wan't to use single instance in more then one places.

async function onDelete() {
    const { show } = await Confirm.new();
    const result = await show({
      title: ' Are you sure you want to delete the file ?'
    });
    if (result === false) {
      return;
    }
    ...
  }

Show method can also resolve with user provided value -

Provided components (content and footer) in the config object will receive `ok` and `cancel` callback methods as props or parameter. The value provided to these methods will be used to resolve the promise returned by show method. Example

destroy method

The destroy method destroys the instance, it returns a promise which resolves without any value.

Once destroyed the show method will always resolve with null value.

Checkout the examples