React modal context

Modal control context made to be used with react-modal library. This context grans you more control over modals for example:

• Close modal on message or event.
• Open modal instead of currently open modal.
• Switch between modals.
• Use modals as carousel.

Table of Contents

• Installation
• Documentation

Installation

you can use npm or yarn

$ npm install react-modal-ctx

$ yarn add react-modal-ctx

Documentation

ModalContextProvider

import { ModalContextProvider } from 'react-modal-ctx';

const App = () => (
  <ModalContextProvider>
    <Page />
  </ModalContextProvider>
)

wrapping Page component enables you to use useModalContext in it.

useModalContext

import { useModalContext } from 'react-modal-ctx';

const {
  openModal,
  openNextModal, 
  closeModal,
  clearModals,
} = useModalContext();

| Method | Description | | --------------- | -------------------------------------------------------------------------------------------------------------- | | openModal | Closes(clears) all other modals and open's new modal. | | openNextModal | opens new modal but leaves old modals in queue so when this modal will be closed previous modal will be shown. | | closeModal | closes top modal | | closeAllModals| closes all modals in queue |