Modal component doesn't needs to be mounted
Call functions show, hide with arguments ReactNode and few options
- Simple: Only have 2 API. show and hide.
- Functional: Let library manages the state. Just call the function.
- Flexible: No restriction for how the modal to be shaped.
- Typed: Built with typescript.
- Small: 160 lines, ~1.8Kb gzipped. no deps.
Install
$ npm install --save react-functional-modal
How is it different?
Usage
Simply Call the function show
with react element(jsx):
;
And hide it:
;
If you want modals to be overlapped, do it:
;;
hide
function closes recently opened modal:
; // hide ModalTwo; // hide ModalOne; // do nothing
If you specified the key, you can explicitly close it:
;;
When you need fade-in, fade-out animation, there is a option:
;
You can override overlay style:
;
Provide onClose
callback:
;
hide(key, ...args)
function pass the arguments to onClose(...args)
callback:
;;
You can promisify the modal
const getValue = resolve;;// inside some async function...const value = await ;...
Advanced
Message
const Message = duration titleconst remain setRemain = React;React;return <div =><h3 =>title</h3><p>`closed after seconds..`</p></div>;;const message = title duration;;...<button =>show message modal</button>
Confirm
const confirm = resolve
Select
const select = title options resolve;...<button =>show select modal</button>
Form
const Form =const values setValues = React;const onChange = React;return <form =><h3>GET FREE CHICKEN!</h3><InputGroup ="name" = = /><InputGroup ="email" = = /><InputGroup ="phone" = = /><div =><button = =>CANCEL</button><button =>SUBMIT</button></div></form>;const form = resolve reject;;
Step
const step = title contents index = 0if index === contentslength || index < 0 return ;;...<button =>show step modal</button>
API
show(ReactNode, Option)
ReactNode
:
React element. e.g. <div>...</div>
, <SomeComponent />
, <>...</>
Option
(optional):
See Option
return: void
hide(string)
string
(optional):
Key of the modal to hide. if not provided, hide modals in order from recent to old.
return: void
Option
All properties follow are optional.
Key | Type | Description |
---|---|---|
key | string |
Unique key of modal. if ommited incremental number is assigned. |
onClose | function |
callback when hide function called |
style | object |
CSS properties object which will overrides the modal's overlay |
fading | boolean |
enable fadeIn and fadeOut (default false ) |
clickOutsideToClose | boolean |
click overlay to close the modal (default false ) |
Default overlay styles
display: flex;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
justify-content: center;
align-items: center;
background: rgba(255,255,255,0);
How it works
Every React element must be mounted somewhere in vdom tree. No react component can be rendered outside of the flow. In this point of view, package react-functional-modal
have no sense. because it doesn't be mounted but called with argument.
Where is the React element given as first argument of show
function mounted?
The answer is another tree:
As the function show
called, it create HTML div
element and append it as a child of document's body. New ReactDOM.render
API called with the HTML div
element as a container, given react element wrapped by overlay as a root.
When the function hide
called, ReactDOM.unmountComponentAtNode
and document.body.removeChild
API detroy and clear the modal.
Restriction
As our modal rendered in separated context, it has no access to context object such as ReduxStore
, React-Router Context
, ThemeContext
.
Solution
- Wrap modal with context providers:
import Provider useStore from "react-redux";...// somewhere in react component...const store = ;const openModal =;...
- Pass functions directly
...// somewhere in react component...const updateSomething =;const openModal =;...
License
MIT