react-modal-supervisor v1.5.2

React-Modal-Supervisor

:gift_heart: ​Modal Supervisor Based-on React Context API & JS Array

Demo

or

$ git clone https://github.com/bhbh1226/react-modal-supervisor.git
$ cd react-modal-supervisor
$ npm install
$ npm run dev-server

Installation

Using npm:

$ npm install --save-dev react-modal-supervisor

This packages based on 'React Context API'. So ModalSupervisor.js is Context Provider.

You have to set and initalize Supervising.

Basic Usage

Supervisor Setup

Initializing in App.js

First, Because ModalSupervisor based on Context API's Provider, It should be placed on root.

// App.js
// import modules
import React from 'react'
import ModalSupervisor from 'react-modal-supervisor'
import MainPage from './MainPage.js'


// App components
function App() {
	return (
		<div id='app'>
			<ModalSupervisor>
				<MainPage/>
			</ModalSupervisor>
		</div>
	)
}

export default App

Create Modal

in HOC

Second, MUST Wrap component by ModalSupervisorHOC to use createModal Function.

third, you can use props.modalActions.createModal function to create Modal

// MainPage.js
import React from 'react'
import { ModalSupervisorHOC } from 'react-modal-supervisor'

function MainPage(props) {
	return (
		<div id='main-page'>
			<button onClick={() => {
        		props.modalActions.createModal('MODAL_TYPE_ALERT', {
					title: 'Hello World!', 
					content: 'nothing better'
				})}}/>
		</div>
	)
}

export default ModalSupervisorHOC(MainPage)

in useContext

after react supports useContext, our library can use useContext since 1.5.0

this way is more pretty and more comfortable than using HOC

import React, { useContext } from 'react'
import { ModalContext } from 'react-modal-supervisor'

function MainPage(props) {
  const { modalActions } = useContext(ModalContext)
  
  return (
		<div id='main-page'>
			<button onClick={() => {
          modalActions.createModal('MODAL_TYPE_ALERT', {
					title: 'Hello World!', 
					content: 'nothing better'
				})}}/>
		</div>
	)
}

export default MainPage

with callback function

const msg = {
    title: "Hello, World!",
    content: "Hello World1!!!!1!"
}

this.props.modalActions.createModal("MODAL_TYPE_CONFIRM", msg, {}, () => {console.log("onConfirm")}, () => {console.log("onDismiss")})
this.props.modalActions.createModal("MODAL_TYPE_PROMPT", msg, {}, (param) => {console.log(param + "is typed")}, () => {console.log("onDismiss")})

with promise

const msg = {
    title: "Hello, World!",
    content: "Hello World1!!!!1!"
}

this.props.modalActions.createModal("MODAL_TYPE_CONFIRM", msg)
    .then(result => {
        if (result === true) {
        	console.log("onConfirm")
        } else {
            console.log("onDismiss")
        }
})

this.props.modalActions.createModal("MODAL_TYPE_PROMPT", msg)
    .then(result => {
        if (result !== false) {
        	console.log(result)
        } else {
            console.log("onDismiss")
        }
})

with async/await

const msg = {
    title: "Hello, World!",
    content: "Hello World1!!!!1!"
}

// you can wait until value will return
const confirm_result = await this.props.modalActions.createModal("MODAL_TYPE_CONFIRM", msg)
const prompt_result = await this.props.modalActions.createModal("MODAL_TYPE_PROMPT", msg) 

// you can also use alert with await for waiting result
const alert_result = await this.props.modalActions.createModal("MODAL_TYPE_ALERT", msg)

Passing Props

CreateModal General

modalActions.createModal(MODAL_TYPE: String, TEXT_JSON?: Object, PROPS_JSON?: Object, confirmCallback?: function, dismissCallback?: function)

MODAL_TYPE

TEXT_JSON

PROPS_JSON

this props is extra props passed to Modal Component.

ADVANCE Usage

standard modal's style override

Create NewCustomStyle Component

in NewCustomStyle.js

// NewCustomStyle.js
// with new file named 'NewCustomStyle.js'
import { StyleManager } from 'react-modal-supervisor';
const { STYLE_BACKGROUND, styleOverride } = StyleManager
// you should import StyleManager from react-modal-supervisor
// and you will destructuring STYLE_BACKGROUND enum and styleOverride function.

const CustomBackground = styled.div`
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    background-color: rgba(12, 243, 123, 0.4);
    position: fixed;

    top: 0;
    left: 0;

    height: 100vh;
    width: 100%;

    z-index: 9000;
`

const NewCustomStyle = () => {
    styleOverride(STYLE_BACKGROUND, CustomBackground)
})

export default NewCustomStyle

!!! you can use styled-component for new Style.

Apply Custom Style

in App.js

//App.js
import NewCustomStyle from './NewCustomStyle';

NewCustomStyle()

CUSTOM_STYLE_TYPES

Add Custom Modal

Create CustomModal

in NewCustomModal.js

// NewCustomModal.js
// your modal will receive props like (children, onClose, onConfirm, onDismiss)
const NewCustomModal = ({children, onClose}) => {
    return (
        <div
      		style={{
       			position: "fixed",
        		top: 0,
        		left: 0,
        		width: "100%",
        		height: "100vh",
        		backgroundColor: "rgba(0, 0, 0, 0.1)",
        		zIndex: 10000
      		}}
      		onClose={onClose}
    	>
      	<div
      		style={{
          		position: "fixed",
          		top: "50%",
          		left: "50%",
          		transform: "translate(-50%, -50%)",
          		backgroundColor: "white"
        	}}
      	>
        <h1>{text.title} Is Title!</h1>
        <h1>{text.content} Is Content!</h1>
        <h1>really?</h1>
      </div>
    </div>
    )
}

export default NewCustomModal

you can use props for close modal, confirm modal, dismiss modal.

props text is passed JSON text object.

if you call props.onDismiss(), modal will return false and closed.

if you call props.onConfirm("wow"), modal will return "wow" and closed.

Add Custom Modal to Supervisor

// App.js
import { addCustomModal } from 'react-modal-supervisor'
import NewCustomModal from './NewCustomModal.js'

addCustomModal("MODAL_TYPE_NEW", NewCustomModal)

Use in MainPage.js

// MainPage.js
this.props.modalActions.createModal("MODAL_TYPE_WOW", "안녕")

Documents

Modal Context Provider's Actions List

MODAL_TYPES TABLE

CUSTOM_STYLE_TYPES TABLE

TEXT_JSON type TABLE

Issues

Please check our issues in github

Made by

bhbh1226(박평진)