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, can be accessed in the modal using the `data` prop of your modal component
`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.


import { useModals } from 'react-easy-modals'
 
const modals = useModals()
 
// Close the current modal
modals.close()
 
// Close the last 2 modals
modals.close(2)

Param	Type	Required	Description
`amount`	`number`	No	The number of modals to close. Defaults to 1

modals.closeById

Closes a modal by its id.


import { useModals } from 'react-easy-modals'
 
const modals = useModals()
 
modals.open(MyModal, {}, { id: 'my-modal' })
modals.closeById('my-modal')

Param	Type	Required	Description
`id`	`string`	Yes	The id of the modal to close

modals.closeAll

Closes all modals.


import { useModals } from 'react-easy-modals'
 
const modals = useModals()
 
modals.closeAll()

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.