useModals

The main entry point for the modals API.

modals.open

Opens a modal. Returns a promise that resolves when the modal is closed. Value can be determined by the modal using its close(value) prop, otherwise it will resolve to undefined.


import { useModals } from 'react-easy-modals'
import MyModal from './MyModal'
 
const modals = useModals()
const value = await modals.open(MyModal, props, options)

Param	Type	Required	Description
`component`	`ReactComponent`	Yes	Your React modal component
`props`	`any`	No	Props for the modal
`options`	`object`	No
`options.id`	`string`	No	Gives the modal an id, which can be used for `closeById(id)`
`options.replace`	`boolean`	No	This modal will replace the last modal in the stack

modals.close

Closes the current modal or last amount of modals in the stack. Returns true if the modal was closed, false if the modal prevented the close via useBeforeClose.


import { useModals } from 'react-easy-modals'
 
const modals = useModals()
 
// Close the current modal
modals.close()
 
// Close the last 2 modals
modals.close(2)
 
// Force close, ignoring useBeforeClose callbacks
modals.close(1, { force: true })

Param	Type	Required	Description
`amount`	`number`	No	The number of modals to close. Defaults to 1
`options`	`CloseOptions`	No	Options for closing

modals.closeById

Closes a modal by its id. Returns true if the modal was closed, false if the modal prevented the close via useBeforeClose.


import { useModals } from 'react-easy-modals'
 
const modals = useModals()
 
modals.open(MyModal, {}, { id: 'my-modal' })
modals.closeById('my-modal')
 
// Force close, ignoring useBeforeClose callback
modals.closeById('my-modal', { force: true })

Param	Type	Required	Description
`id`	`string`	Yes	The id of the modal to close
`options`	`CloseOptions`	No	Options for closing

modals.closeAll

Closes all modals. Returns true if any modal was closed. Modals using useBeforeClose that return false will remain open unless force is used.


import { useModals } from 'react-easy-modals'
 
const modals = useModals()
 
// Close all modals (respects useBeforeClose)
modals.closeAll()
 
// Force close all, ignoring useBeforeClose callbacks
modals.closeAll({ force: true })

Param	Type	Required	Description
`options`	`CloseOptions`	No	Options for closing

modals.stack

An array of the current stack of modals.


import { useModals } from 'react-easy-modals'
 
const modals = useModals()
 
console.log(modals.stack) // Array of current modals

modals.action

The last action that was performed on the modals stack (push, pop or replace). This can be useful for animations.


import { useModals } from 'react-easy-modals'
 
const modals = useModals()
 
console.log(modals.action) // 'push' | 'pop' | 'replace' | undefined

The modals.open method returns a promise that resolves when the modal is closed. Modals can return a value by using their close() prop.

When closing modals programmatically, their modals.open promises will resolve with undefined. If you need to return a value, use the close() prop.