Context-react-modal NPM

Context Modal

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>>(renderNodeModal: T) => void`	modal open function
`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