Context Modal

Table of Contents

• Installation
• API documentation
• Demos

Installation

To install, you can use npm:

$ npm install context-react-modal

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import { ModalContext, ModalRootProvider, Modal } from 'context-react-modal'

const App = () => {
  const { showModal } = React.useContext(ModalContext)

  return (
    <div>
      <button
        onClick={() => {
          showModal(params => (
            <Modal
              animationName='swing'
              condition={() => (10 > 20 ? true : false)}
              closeTimeout={400}
              {...params}
            >
              {({ closeModal }) => Some modal}
            </Modal>
          ))
        }}
      >
        Try me!
      </button>
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(
  <ModalRootProvider>
    <App />
  </ModalRootProvider>,
  rootElement,
)

API documentation

Props	Type	required	examples	description
children	ReactNode	true
type	string - danger , success, primary	false	example-types
customTypeStyles	FlattenInterpolation - key: { danger , success,primary }	false	custom-types
style	FlattenInterpolation	false	custom-style
animationName	string - jackIn, rubber, swing, rotate, translate, scale, rollin	false	Animations
customAnimation	FlattenInterpolation<ThemedStyledProps<{ isAnimated?: boolean }, any>>	false	Custom animation
labelText	string	false
labelComponent	(props: CustomLabelProps) => ReactNode	false	label component
id	number	true
condition	() => boolean	false		your condition to render the component
cookie	object	false	Array modals
cookie => name	string	true
cookie => maxAge	number - MS	false		cookie lifetime - ms
closeTimeout	number - MS	false		time to remove a component - ms (400)

API context

Context	Type	description
showModal	`<T extends RenderNodeModal	Array>(renderNodeModal: T) => void`
hideModal	(id: number) => void	modal close request
nodeList	Array<{ id: number, node: node: (props: { id: number; key: number }) => ReactNode }>	opened modals
currentNodeId	number	id active modal
renderNodeModal	RenderNodeModal = (props: { id: number }) => React.ReactNode	modal component type

Demos

https://bogdanq.github.io/modal-story/public/?path=/story/modals--default-modal