React-Modal-Supervisor
💝 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 // App components { return <div id='app'> <ModalSupervisor> <MainPage/> </ModalSupervisor> </div> }
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 { return <div id='main-page'> <button onClick= { propsmodalActions}/> </div> } 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
{ const modalActions = return <div id='main-page'> <button onClick= { modalActions}/> </div> }
with callback function
const msg = title: "Hello, World!" content: "Hello World1!!!!1!" thispropsmodalActionsthispropsmodalActions
with promise
const msg = title: "Hello, World!" content: "Hello World1!!!!1!" thispropsmodalActions thispropsmodalActions
with async/await
const msg = title: "Hello, World!" content: "Hello World1!!!!1!" // you can wait until value will returnconst confirm_result = await thispropsmodalActionsconst prompt_result = await thispropsmodalActions // you can also use alert with await for waiting resultconst alert_result = await thispropsmodalActions
Passing Props
CreateModal General
modalActions
MODAL_TYPE
type name | required types | Examples | Returns |
---|---|---|---|
MODAL_TYPE_ALERT | type(String), text(JSON) | createModal (MODAL_TYPE_ALERT , "Hello" ) | true |
MODAL_TYPE_CONFIRM | type(String), text(JSON), props(object), confirm(Callback), dismiss(Callback) | createModal (MODAL_TYPE_CONFIRM , "What do you want") | (confirm)true, (dismiss)false |
MODAL_TYPE_LOADING | type(String) | createModal (MODAL_TYPE_LOADING ) Please use this .props .modalActions .popModal () to Close your modal. | |
MODAL_TYPE_PROMPT | type(String), text(JSON), props(object), confirm(param) (Callback), dismiss(Callback) | createModal(MODAL_TYPE_PROMPT, "prompt") | (confirm)value, (dismiss)false |
TEXT_JSON
name | type | descriptions |
---|---|---|
title | String | Title wrapped by h1 tag |
content | String | inner Content wrapped by p tag |
placeholder | String | prompt modal's placeholdera |
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';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 = styleddiv` 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 = { })
!!! you can use styled-component for new Style.
Apply Custom Style
in App.js
//App.js;
CUSTOM_STYLE_TYPES
type name | descriptions | when |
---|---|---|
STYLE_BACKGROUND | background blackout | ALL |
STYLE_INNER | modal inner white thing (relative) | ALL |
STYLE_ACTION_CONTAINER | buttons container | CONFIRM, PROMPT |
STYLE_INPUT_TEXT | PromptModal's input | PROMPT |
STYLE_CONFIRM_BUTTON | Confirm Button | CONFIRM, PROMPT |
STYLE_DISMISS_BUTTON | Dismiss Button | CONFIRM, PROMPT |
STYLE_CLOSE_BUTTON_ABSOLUTE | AlertModal's Close Button (absolute) | ALERT |
STYLE_SPINNER | LoadingModal's Spinner (relative) | LOADING |
Add Custom Modal
Create CustomModal
in NewCustomModal.js
// NewCustomModal.js// your modal will receive props like (children, onClose, onConfirm, onDismiss)const NewCustomModal = { 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>texttitle Is Title!</h1> <h1>textcontent Is Content!</h1> <h1>really?</h1> </div> </div> )}
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
Use in MainPage.js
// MainPage.jsthispropsmodalActions
Documents
Modal Context Provider's Actions List
Name | Params | descriptions |
---|---|---|
createModal | type, text, props, confirm, dismiss | create Modal by params |
addCustomModal | type, component | create Custom Modal |
popModal | pop pre-floating modal. | |
closeModalIdx | idx | close modal by idx. |
setModalResult | idx, result | set result and close modal which idx |
MODAL_TYPES TABLE
type name | required types | Examples | Returns |
---|---|---|---|
MODAL_TYPE_ALERT | type(String), text(JSON) | createModal (MODAL_TYPE_ALERT , "Hello" ) | true |
MODAL_TYPE_CONFIRM | type(String), text(JSON), props(object), confirm(Callback), dismiss(Callback) | createModal (MODAL_TYPE_CONFIRM , "What do you want") | (confirm)true, (dismiss)false |
MODAL_TYPE_LOADING | type(String) | createModal (MODAL_TYPE_LOADING ) Please use this .props .modalActions .popModal () to Close your modal. | |
MODAL_TYPE_PROMPT | type(String), text(JSON), props(object), confirm(param) (Callback), dismiss(Callback) | createModal(MODAL_TYPE_PROMPT, "prompt") | (confirm)value, (dismiss)false |
CUSTOM_STYLE_TYPES TABLE
type name | descriptions | when |
---|---|---|
STYLE_BACKGROUND | background blackout | ALL |
STYLE_INNER | modal inner white thing (relative) | ALL |
STYLE_ACTION_CONTAINER | buttons container | CONFIRM, PROMPT |
STYLE_INPUT_TEXT | PromptModal's input | PROMPT |
STYLE_CONFIRM_BUTTON | Confirm Button | CONFIRM, PROMPT |
STYLE_DISMISS_BUTTON | Dismiss Button | CONFIRM, PROMPT |
STYLE_CLOSE_BUTTON_ABSOLUTE | AlertModal's Close Button (absolute) | ALERT |
STYLE_SPINNER | LoadingModal's Spinner (relative) | LOADING |
TEXT_JSON type TABLE
name | type | descriptions |
---|---|---|
title | String | Title wrapped by h1 tag |
content | String | inner Content wrapped by p tag |
placeholder | String | prompt modal's placeholdera |
Issues
Please check our issues in github
Made by
bhbh1226(박평진)